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内 容 近 要 





本 书 内 容 络 合 笔者 在 前 后 端 大 量 开 发 中 的 实战 经验 ， 系 统 化 知识 ， 
浓缩 精华 ， 用 通俗 易 懂 的 语言 直击 学 习 者 的 痛 点 。 通 过 本 书 ， 能 让 你 
从 “野生 网 页 设计 师 ” 水 平 提 升 达到 “真正 前 端 工程 师 ” 水 平 。 





”全书 分 为 两 大 部 分 : 第 一 部 分 是 HTML 进 阶 内 容 ， 主 要 介绍 HTML 
高 级 技巧 和 HTML 语 义 化 ;第 二 部 分 是 CSS 进 阶 内 容 ， 主 要 介绍 CSS 开 
发 技巧 、 代 码 规 范 、 性 能 优化 、 属 性 本 质 、 重 要 概念 〈 如 包含 块 、BFC 
和 IFC 等 ) 。 





除了 知识 讲解 ， 本 书 还 融入 了 大 量 的 开发 案例 ， 更 加 注重 编程 思维 
的 培养 ， 并 且 提 供 学 习 者 一 个 流畅 的 学 习 思 路 。 


近年 来 ，Web 前 端 技 术 飞 速 发 展 ， 作 用 也 日 趋 重要 。 在 Web 前 端 技 
术 中 ，HTML 和 CSS 是 最 基础 的 知识 。 当 前 市 面 上 同类 书籍 很 多 ， 但 大 
部 分 都 是 介绍 基础 性 的 HTML 标签 和 CSS 属 性 ， 缺 乏 一 本 真正 体现 前 端 
开发 水 平 的 书籍 。 


本 书 是 《Web 前 端 开发 精品 课 HITML 和 CSS 基 础 教程 》 的 姊妹 篇 ， 
对 于 基础 知识 ， 不 再 进行 详细 介绍 。HTML 和 CSS 知 识 多 而 杂 ， 因 此 入 
门 容易 精通 难 。 本 书 对 高 级 部 分 的 内 容 进 行 深加工 ， 使 其 更 加 完善 。 为 
了 避免 大 家 多 走 弯 路 ， 笔 者 把 前 端 碎片 化 的 知识 系统 化 ， 提 供给 学 习 者 
一 个 流畅 的 学 习 思 路 。 


本 书 特 点 


。 系统 全 面 ， 进 阶 内 容 清晰 梳理 ， 便 于 读者 流畅 地 学 习 。 
。 通俗 易 刷 ， 用 最 贴心 形象 的 语言 直 指 技术 本 质 。 

。 贴近 读者 ， 结 合 自 己 学 习 经 历 ， 文 字 有 温度 。 

。 和 直击 痛 点 ， 规 避 学 习 中 的 很 多 思维 误区 。 

。 合金 量 高 ， 前 剖 高 质量 内 容 整 合 ， 呈 现 局 级 开发 技巧 。 


读者 对 象 


。 有 一 定 基础 的 Web 前 病 工 程 师 
。 大 中 专 院 校 相关 专业 学 生 
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由 于 笔者 水 平 有 限 ， 书 中 难免 有 错漏 之 处 ， 读 者 如 有 果 遇 到 问题 或 有 
意见 和 建议 ， 可 以 到 绿叶 学 习 网 (www.lvyestudy.com) 或 者 发 邮件 
(lvyestudy@foxmail.com ) 与 我 联系 。 





HTMIL 进 阶 


1.1 HTML 和 CSS 进 阶 简介 


1.1.1 你 真 的 精通 HTML 和 CSS 吗 


我 们 都 知道 ， 前 端 技术 最 核心 的 三 大 技术 是 HIML、CSS 和 
JavaScript。HTML 和 定义 网 页 的 结构 ，CSS 定 义 网 页 的 外 观 ， 而 JavaScript 
定义 页 面 的 行为 。 其 中 HTML 和 CSS 是 前 端 技术 中 最 基础 的 东西 。 


HTML 和 CSS 入 门 容易 ， 精 通 却 很 难 ， 特 别 是 CSS。 “什么 ? 精通 很 
难 ? 我 很 确定 我 已 经 精通 CSS 了 啊 ! ”这 种 话 往往 是 出 目 学 习 三 两 个 
月 、 技 术 刚 入 门 的 人 之 口 。 我 就 曾经 碰 到 不 少 这 样 的 人 。 对 于 HTML 来 
说 ， 确 实 没 有 多 少 东 西 可 以 深入 的 ， 但 是 CSS 却 不 一 样 。 

如 果 你 认为 自己 精通 HTML 和 CSS 了 ， 那 你 可 以 思考 一 下 下 面 这 些 
问题 。 

(1) 什么 是 HTML 语 义 化 ? 对 于 标题 、 图 片 、 表 格 、 表 单 ， 如 何 
更 好 地 实现 这 些 方面 的 语义 化 ? 

(2) 什么 是 外 边 距 著 加 ?出现 外 边 距 著 加 的 根本 原因 是 什么 ? 

(3) 在 CSS 中 ， 关 于 命名 、 书 写 以 及 注释 都 有 哪些 好 的 规范 ( 便 
于 团队 开发 和 后 期 维护 ) ? 


(4) 说 一 下 display 这 几 个 属性 值 的 区 别 : block、inline、inline- 
block、 table-cell。 








(5) 你 深入 了 解 过 text-indent、text-align、line-height 愉 及 vertical- 
align 这 几 个 属性 么 ?它们 都 有 哪些 高 级 技巧 。 


(6) 为 什么 overflow:hidden 可 以 清除 浮动 ? 
(7) CSS 都 有 哪些 性 能 优化 技巧 ? 如 何 使 用 更 高 性 能 的 选择 器 ? 
(8) 如 何 使 用 CSS 实 现 各 种 图 形 效 果 ， 例 如 三 角形 、 圆 、 李 圆 


(9) 解释 一 下 这 几 个 概念 : 包含 块 、BFC 和 IFC、 层 营 上 下 文 。 


如 果 你 有 一 半 答 不 上 来 ， 说 明 你 连 * 熟 悉 CSS” 都 算 不 上 ， 更 别 说 “ 精 
通 CSS” 了 。 因 此 大 家 不 要 学 了 几 个 标签 就 认为 目 己 精 通 HTML， 人 也 不 要 
学 了 几 个 属性 就 觉得 自己 精通 CSS 了 。 不 管 是 哪 门 技术 ， 自 己 都 应 该 深 
入 地 去 学 习 ， 自 我 满足 只 会 让 自己 滞留 不 前 。 


1.1.2 进 阶 教程 简介 


HTML 进 阶 的 内 容 只 针对 HTML 4.01， 而 CSS 进 阶 的 内 容 只 针对 
CSS 2.1。 对 于 HTML 5 和 CSS 3 的 内 容 ， 可 以 关注 绿叶 学 习 网 。 


本 书 是 《web 前 端 开发 精品 课 HIML 和 CSS 基 础 教程 》 的 姊妹 篇 ， 
两 者 具有 很 强 的 连贯 性 。 本 书 并 不 适合 没有 基础 的 人 学 习 ， 对 于 HTML 
和 CSS 入 门 的 相关 知识 ， 可 以 参考 本 书 的 姊妹 篇 ， 不 然 在 学 习 本 书 的 过 
程 中 可 能 对 有 些 东西 无 法 理解 。 


本 书 虽 然 涉及 的 东西 很 多 ， 但 浓缩 的 都 是 精华 。 有 一 句 话说 得 
好 : “干扰 因 系 越 少 ， 越 容易 专注 一 件 事 ”"， 因 此 对 于 书 中 的 技巧 我 们 也 
会 以 最 简单 的 例子 来 讲解 。 笔 者 在 编写 本 书 的 时 候 也 是 字 其 句 酌 ， 该 展 
开 的 会 详细 展开 ， 没 用 的 东西 一 定 会 一 笔 带 过 。 和 希望 大 家 在 学 习 中 不 要 
跳跃 性 地 学 习 。 


此 外 ， 本 书 里 很 多 东西 比较 复杂 ， 一 时 半 会 儿 可 能 消化 不 了 ， 应 该 
多 回来 翻 几 遍 ， 并 且 结 合 自己 的 实践 来 理解 。“ 书 读 百 毅 ， 其 义 自 
见 。” 古 人 有 些 话 还 是 说 得 蛮 好 的 。HTML 和 CSS 这 些 进 阶 知识 在 本 书 中 
己 经 梳理 得 比较 完善 了 ， 学 习 中 可 以 来 回 翻 一 秋 ， 想 当年 我 们 连 “ 翻 ”的 
份 者 没有， 因为 压根 儿 就 没有 这 样 的 一 个 系统 化 的 学 习 教 程 。 





























对 于 本 书 的 学 习 ， 一 定 要 下 载 这 本 书 的 源 代码 ， 一 边 查 看 源 代码 ， 
ee 本 书 中 的 代码 请 从 异步 社区 www.epubit.com.cn 本 书页 面 
下 载 。 


1.2 HTML、XHTML 和 了 HTML5 


很 多 新 手 往往 分 不 清 HIML、XHTML 和 HTML5， 这 一 节 给 大 家 详 
细 讲 解 一 下 这 三 者 的 关系 和 区 别 。 


1.2.1 _ HTML 和 XHTML 
HTML， 全 称 HyperText Mark-up Language〈 超 文本 标记 语言 )》 ， 是 
构成 网 页 文档 的 主要 语言 。 我 们 常 说 的 HIML 指 的 是 HTML 4.01。 


XHTML ， 全 称 EXtensible HyperText Mark-up Language 〈 扩 展 的 超 
文本 标记 语言 )》 ， 它 是 XML 风格 的 HIML 4.01， 我 们 可 以 称 之 为 更 严 
格 、 更 纯净 的 HTML 4.01。 


HTML 语 法 书写 比较 松散 ， 利 于 开发 者 编写 。 但 是 对 于 机 器 ， 如 电 
脑 、 手 机 等 来 说 ， 语 法 越 松散 ， 处 理 起 来 越 困 难 。 因 此 为 了 让 机 器 更 好 
地 处 理 HTML， 我 们 才 在 HTML 基 础 上 引入 了 XHTML 。 








XHTML 相对 于 HTML 来 说 ， 在 语法 上 更 加 严格 。XHTML 和 HTML 
主要 区 别 如 下 。 


1. XHTML 标签 必须 闭合 。 


在 XHTML 中 ， 所 有 标签 必须 闭合 ， 例 如 “<p></p>”<div> 
</div>” 等 。 此 外 ， 衬 标签 也 需要 闭合 ， 例 如 <br> 要 写成 <brv>。 


错误 写法 : <p> 欢 迎 来 到 绿叶 学 习 网 


正确 写法 : <p> 欢 迎 来 到 绿叶 学 习 网 </p> 








2. XHTML 标签 以 及 属性 必须 小 写 。 


在 XHTML 中 ， 所 有 标签 以 及 标签 属性 必须 小 写 ， 不 能 大 小 写 混 
合 ， 也 不 能 全 部 都 是 大 写 。 不 过 标签 的 属性 值 可 以 大 写 。 





错误 写法 : <Body><DIV></DIV></Body> 


正确 写法 : <body><div></div></body> 
3. XHTML 标签 属性 必须 用 引号 。 


在 XHTML 中 ， 标 签 属性 值 必须 用 引号 括 起 来 ， 单 引号 、 双 引号 都 
可 以 。 


音 误 写法: <input id=txt type=text/> 


正确 写法 : <input id="txt" type="text"/> 
4. XHTML 标签 用 id 属性 代 蔡 name 属 性 。 


在 XHTML 中 ， 除 了 表单 元 素 之 外 的 所 有 元 素 ， 都 应 该 用 id 而 不 是 


name。 
音 误 写法: <div name="wrapper"></div> 
正确 写法 : <div id="wrapper"></div> 
下 面 是 一 个 完整 的 XHTML 文 档 。 


<!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.6 Transitional//EN" "http://www. 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>web 前 端 开发 精品 课 系 列 </title> 
</head> 











<body> 
<p>《web 前 端 开 发 精品 课 .HTML 和 CSS 基 础 教程 》</p> 
<p>《web 前 端 开 发 精品 课 .HTML 和 CSS 进 阶 教程 》</p> 
</body> 
</html> 









































1.2.2 HIMLS 


HTML 指 的 是 HTML 4.01，XHTML 是 HTML 的 过 渡 版 本 ，XHTML 
是 XML 风格 的 HTML 4.01。 而 HTML 5 指 的 是 下 一 代 的 HTML， 也 就 是 


HTML 4.01 的 升级 版 。 


不 过 HTML 5 已 经 不 再 是 单纯 意义 上 的 标签 了 ， 它 已 经 远 远 超越 了 
标签 的 范畴 。HTML 5 除了 新 增 部 分 标签 之 外 ， 还 增加 了 一 组 技术 ， 包 
括 canvas、SVG、WebSocket、 本 地 存储 等 。 这 些 新 增 的 技术 都 是 使 用 
JavaScript 来 操作 。 也 就 是 说 ，HTML 5 使 得 HTML 从 一 门 “ 标 记 语 言 " 转 
变 为 一 门 “ 编 程 语 守 。” 


对 于 HTML 5 中 的 新 技术 ， 在 此 不 做 详细 介绍 。 单 纯 从 新 增 的 标签 
上 来 看 ，HTML 5 有 以 下 几 个 特点 。 


1. 文档 类 型 说 明 


基于 HTML 5 设计 准则 中 的 “化 繁 为 简 * 原 则 ， 页 面 的 文档 类 型 
<!DOCTYPE> 被 极 大 地 简化 了 。 


XHTML 文档 声明 如 下 : 


<“!DOCTYPE html] PUBLIC "-//W3C//DTD XHTML 1.6 Transitional//EN" "http://www. 





HTML5 文 档 声 明 如 下 : 


<“!DOCTYPE html> 


2. 标签 不 再 区 分 大 小 写 


<div> 绿 叶 学 习 网 </DIV> 


上 面 这 种 写法 也 是 完全 符合 HTML5 规 范 的 。 但 是 在 实际 开发 中 ， 
建议 所 有 标签 以 及 属性 都 采用 小 写 方式 。 


3. 允许 属性 值 不 加 引号 





<div id=wrapper style=color:red> 绿 叶 学 习 网 </div> 


上 面 这 种 写法 也 是 完全 符合 HTML5 规 范 的 。 但 是 在 实际 开发 中 ， 





建议 标签 所 有 属性 值 都 加 引号 ， 单 引号 或 双 引 号 都 可 以 。 
4. 多 许 部 分 属性 的 属性 值 省 略 


在 HIML5 中 ， 部 分 具有 特殊 性 属性 的 属性 值 是 可 以 省 略 的 。 例 
如 ， 下 面 代码 是 完全 符合 HTML 5 规范 的 : 


<input type= "text” readonly/> 


<input type="checkbox” checked/> 





上 面 两 名 代码 等 价 于 : 


<input type="text" readonly="readonly"/> 
<input type="checkbox" checked="checked"/> 





在 HTML 5 中 ， 可 以 省 略 属性 值 的 属性 如 表 1-1 所 示 。 
表 1-1HTML5 中 可 以 省 略 属性 值 的 属性 


checked="checked" 
readonly="readonly" 











oo 
nohref="nohref" 
noshade="noshade" 


nowrap nowrap="nowrap" 


a re 





selected="selected" 
disabled="disabled" 


一 句 话 概括 HIML、XHTML 和 HTML 5 就 是 : HTML 指 的 是 HTML 
4.01，XHTML 是 HTML 的 过 渡 版 ，HTML 5 是 HTML 的 升级 版 。 





1.3 div 和 span 





对 于 div 和 span 这 两 个 元 素 ， 不 少 新 手 也 不 知道 它们 之 间 有 什么 区 
别 ， 使 用 起 来 也 很 随便 。 因 此 ， 这 里 有 必要 简单 介绍 一 下 。 


div 和 span 没 有 任何 语义 ， 正 是 因为 没有 语义 ， 这 两 个 标签 一 般 都 是 
配合 CSS 来 定义 元 素 样式 的 。 


div 和 span 区 别 如 下 。 


(1) div 是 块 元 素 ， 可 以 包含 任何 块 元 素 和 行内 元 素 ， 不 会 与 其 他 
元 素 位 于 同一 行 ，span 是 行内 元 素 ， 可 以 与 其 他 行内 元 素 位 于 同一 行 。 


(2) div 第 用 于 页 面 中 较 大 块 的 结构 划分 ， 然 后 配合 CSS 来 操作 ; 
span 一 般 用 来 包含 文字 等 ， 它 没有 结构 的 意义 ， 纯 粹 是 应 用 样式 。 当 其 
他 行内 元 素 都 不 适合 的 时 候 ， 可 以 用 span 来 配合 CSS 操 作 。 


其 实 ， 除 了 div 和 span 外 ， 还 有 一 个 label 标 签 。div 和 span 是 无 语义 标 
签 ， 但 label 是 有 语义 标签 。label 只 适用 于 表单 中 ， 用 于 显示 在 输入 控件 
劳 边 的 说 明 性 文字 。 关 于 label 标 答 ， 我 们 在 后 面 “2.5 ”表单 语义 化 ”一 节 
会 详细 介绍 。 




















举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 





站 化 思考 </span>" 能 以 独 利 


</body> 
</html> 





在 浏览 器 预览 效果 如 图 1-1 所 示 。 


图 1-1 div 和 span 





在 这 个 例子 中 ， 我 们 想 要 对 “视觉 化 思考 ”这 几 个 文字 加 粗 或 者 改变 
颜色 ， 此 时 可 以 使 用 span 包 含 文字 ， 然 后 再 进行 样式 修改 。 事 实 上 ， 
span 标 签 往往 都 是 用 来 配合 CSS 来 修饰 元 素 的 。 


对 于 div 和 span， 大 家 经 过 一 些 实践 ， 目 然而 然 会 有 更 深刻 的 理解 ， 
在 此 就 不 吃 嗪 了 。 


1.4 id 和 class 





id 和 class 是 HTML 元 素 中 两 个 最 基本 的 公共 属性 。 一 般 情 况 下 ，id 
和 class 都 用 来 选择 元 系 ， 以 便 进 行 CSS 操 作 或 者 JavaScript 操 作 。 但 是 很 
多 新 手 对 id 和 class 这 两 个 属性 感到 很 迷 范 ， 不 知道 什么 时 候 用 id， 什 么 
时 候 用 class， 甚 至 随便 使 用 。 


1.4.1 id 属 性 


id 属性 具有 唯一 性 ， 也 就 是 说 在 一 个 页 面 中 相同 的 id 只 允许 出 现 一 
次 。W3C 建 议 ， 对 于 页 面 关键 的 结构 或 者 大 结构 ， 我 们 才 使 用 id。 所 谓 
的 关键 结构 ， 指 的 是 诸如 LOGO、 和 导航、 主体 内容、 诱 部 信息 栏 等 结 
构 。 对 于 一 些小 地 方 ， 还 是 建议 使 用 class 属 性 。 


我 们 知道 搜索 引擎 识别 一 个 页 面 结 构 ， 是 根据 标签 的 语义 以 及 id 属 
性 来 识别 的 。 因 此 id 属性 不 要 轻易 使 用 。 此 外 ，id 的 命名 也 十 分 关键 ， 
特别 是 对 搜索 引擎 优化 而 言 。 对 于 id 和 class 的 命名 ， 我 们 在 CSS 进 阶 部 


分 会 详细 介绍 。 








1.4.2 class 属 性 





class， 顾 名 思 义 ， 就 是 “类 ”。 它 采用 的 思想 跟 C、Java 等 编程 语言 
中 的 “类 ”相似 。 我 们 可 以 为 同一 个 页 面 的 相同 元 素 或 者 不 同 元 素 设 置 相 
同 的 class， 然 后 使 得 相同 class 的 元 素 具 有 相同 的 CSS 样 式 。 


如 末 你 要 为 两 个 或 者 两 个 以 上 元 和 际 定 义 相同 的 样式 ， 建 议 使 用 class 
属性 。 因 为 这 样 可 以 减少 大 量 的 重复 代码 。 


注意 ， 对 于 一 个 元 素 而 言 ， 我 们 可 以 定义 多 个 class。 一 般 来 说 ， 定 
义 多 个 class 的 目的 在 于 : 一 般 用 一 个 class 抽 取 公 共 样 式 ， 然 后 用 另外 一 
个 class 定 义 单 独 样 式 。 

举 个 例子 ， 在 一 个 页 面 中 有 如 图 1-2 所 示 的 三 个 栏目 ， 仔 细 分 析 我 
们 会 发 现 这 三 个 栏目 具有 部 分 相同 样式 ， 此 时 我 们 可 以 使 用 一 个 cdlass 来 
定义 公共 样式 ， 但 是 这 三 个 栏目 又 有 各 自 的 样式 。 该 怎么 办 昵 ? 这 时 候 











我 们 应 该 为 这 三 个 栏目 分 别 定 义 不 同 的 class， 以 便 在 CSS 中 控制 单独 的 
样式 。 这 束 是 多 个 class 的 用 处 。 





helicopterj 瑟 客 


图 课时 学 习 网 常见 加 时 解 等 
园 网 站 技术 , 该 如 何 学 习 ? 
课时 学 习 网 开张 能 


更 多 >> 
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图 1-2 


工具 手册 要 多 >> 


» Visual Studio 2010 下 载 
S$ Dreammweavef 竺 列 下 载 
»》 Photoshop 系 列 下 载 

办 SQL Server 2008 下 载 
» Sublime Text 下 载 
HTML 参 考 手 出 

3 CSS 参 考 手 舱 

» jQuery 参考 手册 

9 JavaScript 参 考 手 册 





上 图 的 三 个 栏目 的 HTML 关 键 结构 如 下 : 





<div class="column blog"> 


<h2></h2> 
<div></div> 
</div> 


<div class="column manual"> 


<h2></h2> 


<div></div> 
</div> 
<div class="column tool"> 
<h2></h2> 
<div></div> 
</div> 


对 于 id 和 class， 我 们 


包 2 


4 一 口 


绿叶 学 习 网 中 三 个 栏目 


要 多 > > 


fy 


在 线 洞 色 板 


程序 员 老 质 历 





下 : 对 于 页 面 关 键 结 构 ， 建 议 使 用 id; 


对 于 小 地 方 ， 建 议 使 用 class。 惑 算 我 们 不 需要 对 关键 结构 进行 CSS 操 作 
或 者 JavaScript 操 作 ， 也 建议 加 上 id， 以 便 搜 索引 擎 识别 页 面 结构 。 





1.5 ”浏览 器 标题 栏 小 图 标 


在 浏览 网 页 的 时 候 ， 我 们 会 发 现 几乎 所 有 网 站 的 页 面 在 浏览 占 标 题 
栏 前 面部 会 有 一 个 小 图 标 ， 如 图 1-3 所 示 。 





ex 


半 绿叶 学 习 网 X 员 


NE 白 yocalhosti 三 


浏览 器 标题 栏 小 图 标 








图 1-3 浏览 器 标题 栏 小 图 标 


想 要 实现 这 个 效果 ， 我 们 只 需要 在 head 标 签 添加 一 个 link 标 签 即 


4D 





<link rel="shortcut icon” type="image/Xx-icon”href="favicon.ico"/> 


说 明 : 





rel 和 type 这 两 个 属性 的 取 值 是 固定 形式 ， 无 需 多 讲 。href 属 性 取 值 
为 小 图 标的 地 址 ， 这 个 地 址 是 根据 小 图 标 在 站 点 文件 夹 路 径 而 定 的 ， 跟 


图 片 引 用 路 径 是 一 样 的 道理 。 


这 里 注意 一 下 ， 小 图 标 格式 是 .ico， 而 不 是 .jpeg、.png、.gif 等 格 
式 。 对 于 .ico 格 式 的 图 标 制作 ， 我 们 可 以 搜索 一 下 “在 线 icon”， 会 发 现 很 
多 不 错 的 在 线 工 具 ， 大 家 可 以 收藏 一 下 。 


cE 


<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title> 绿 叶 学 习 网 </title> 


<link rel="shortcut icon” type="image/x-icon" href="images/favicon.ico 
</head> 


<body> 
</body> 
</html> 





在 浏览 占 预 览 效 果 如 图 1-4 所 示 。 


地 绿叶 学 习 网 x \ 


各 人 | localhost:1C5, 








图 1-4 ”浏览 器 标题 栏 小 图 标 预览 图 
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2 语义 化 而 介 








由 于 HTML 简 单 ， 很 多 初学 者 对 它 存在 一 种 偏见 ， 觉 得 它 没 多 少 东 
西 ， 因 此 在 学 习 的 过 程 中 随便 对 待 。 其 实 ， 学 习 HTML 的 重点 不 在 于 党 
经 了 多 少 标签 ， 而 是 在 于 党 所 标签 的 请 义 以 及 如 何 编号 一 个 语义 结构 良 
好 的 页 面 。 


在 实际 开发 过 程 中 ， 很 多 人 由 于 对 标签 语义 不 熟悉 ， 常 常用 菜 一 个 
标签 代 莹 另外 一 个 标签 来 实现 某 些 效果 。 











站 例 ; 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<title></title> 
<style type="text/css"> 
body{font-family:" 微 软 雅 黑 ";font-size:14px;} 
.Content 


{ 














width:366pX; 
padding:16px; 
border:1px dashed gray; 

} 

.Content div 

{ 
font-size:16px; 
font-weight:bold; 
height:24px; 


line-height:24px; 


} 
</style> 
</head> 
<body> 
<div class="content"> 
<div>web 前 端 开 发 </div> 
<p>web 前 端 开发 最 核心 3 个 技术 : HTML、CSS 和 javaScript。HTML 控 制 网 页 的 结构 

















</div> 
</body> 
</html> 


在 浏览 器 预览 效果 如 图 2-1 所 未 。 


: web 前 端 开 发 


，web 前 端 开发 最 核心 3 个 技术 : HTML、CSS 和 
， JavaScript。HTML 控 制 网 页 的 结构 ，CSS 控 制 网 ， 
， 页 的 样式 ，jJavaScript 控 制 网 页 的 行为 。 


图 2-1 div 实现 的 标题 效果 


对 于 上 面 的 标题 效果 ， 正 确 的 做 法 应 该 是 使 用 h1~h6 标 签 来 实现 ， 
但 这 里 却 使 用 div 来 代 普 了 。 虽然 页 面 效 果 一 样 ， 但 是 这 种 “用 某 一 个 标 
签 代替 另外 一 个 标签 来 实现 相同 效果 ”的 做 法 是 完全 不 可 取 的 ， 因 为 它 
违背 了 HTML 这 门 语 言 的 初衷 。 


HTML 的 精髓 就 在 于 标签 的 语义 。 在 HTML 中 ， 大 部 分 标签 都 有 它 
自身 的 语义 ， 例 如 p 标 签 ， ne 标记 的 是 一 个 段落 ; 
hl 标签 ， 表示 “header1”， 标 记 的 是 一 个 最 高 级 标题 …... 而 div 和 span 是 无 

语义 的 标签 ， 我们 应 该 尽 可 能 少 用 。 


HTML 很 简单 ， 因 此 很 多 初学 者 往往 忽略 了 它 的 目的 和 重要 性 。 我 
们 学 习 HTML 并 不 是 看 自己 学 了 多 少 标签 ， 更 重要 的 是 在 你 需要 的 地 方 
吾 义 化 标签 。 把 标签 用 在 对 的 地 方 ， 这 才 是 HTML 学 习 

目 








我 们 都 知道 前 端 最 核心 的 技术 是 HTML、CSS 和 JavaScript 这 三 种 。 
其 中 HTML 是 网 页 的 结构 ，CSS 是 网 页 的 外 观 ，JavaScript 是 网 页 的 行 
为 。 在 这 三 大 元 素 中 ，HTML 才 是 最 重要 的 ， 而 CSS 和 JavaScript 只 是 用 
来 修饰 结构 的 。 惑 像 你 盖 房 子 ， 房 子 装 饰 得 再 漂亮 ， 如 果 结 构 不 稳 也 容 
日 


匈 声 。 











整 站 开发 时 ， 编 写 的 代码 往往 都 是 成 千 上 万 行 ， 如 果 我 们 全 部 使 用 
divr 和 span 来 代 蔡 语义 化 标签 ， 后 期 维护 会 非常 困难 。 此 外 对 于 一 个 页 面 
来 说 ， 我 们 可 以 根据 一 个 页 面 的 外 观 来 判断 哪些 是 标题 ， 哪 些 是 图 片 。 
但 是 搜索 引擎 跟 人 不 一 样 ， 它 可 “看 不 慌 ” 一 个 页 面 长 什么 样 的 。 它 只 会 
根据 HTML 代 码 来 识别 。 搜 索引 敬一 般 都 是 根据 HTML 标 签 来 识别 这 里 
是 一 个 img 标 签 ， 那 里 是 一 个 p 标 签 等 。 如 果 整 个 页 面 都 是 div 和 span， 搜 
索引 苟 小 蜂 蛛 肯定 会 迷路 ， 可 能 以 后 都 不 想来 光顾 你 这 个 站 点 。 要 是 这 
样 的 话 ， 你 崩 尝 了， 你 的 老板 也 跟着 朋 尝 了 。 


从 上 面 我 们 知道 ， 编 写 一 个 语义 结构 民 好 的 页 面 在 实际 开发 中 极其 
重要 。 主 要 有 两 个 最 大 的 优点 : (利于 开发 调试 和 后 期 维护 ，@ 利 于 搜 
索引 擎 优化 。 在 这 一 章 ， 我 们 从 以 下 7 个 方面 给 大 家 详细 讲解 HIML 语 
义 化 。 





(1) 标题 语义 化 。 
(2) 图 片 语义 化 。 
(3) 表格 语义 化 。 
(4) 表单 语义 化 。 
(5) 其 他 语义 化 。 
(6) 语义 化 验证 。 


(7) HTML 5 握 弃 的 标签 。 


2.2 ”标题 语义 化 


h1~h6 是 标题 标签 ，h 表 示 “header*"”。h1~h6 在 HTML 语 义 化 中 占有 
极其 重要 的 地 位 。h1~h6 按 照 标题 的 重要 性 依次 递减 ， 其 中 hi 重要 性 最 
高 ，h6 重 要 性 最 低 。 


相对 于 其 他 语义 化 标签 ，h1~h6 在 搜索 引擎 优化 〈 即 SEO) 中 占有 
相当 重要 的 地 位 。 在 一 个 页 面 中 ，h1~h6 这 6 个 标签 ， 我 们 不 需要 全 部 
都 用 上 ， 都 是 根据 需要 才 用 的 。 对 于 hl1~h6， 一 般 情 况 下 我 们 只 会 用 到 
h1、h2、h3 和 h4， 很 少 再 会 去 用 h5 和 h6， 因 为 一 个 页 面 不 可 能 用 到 那么 
多 级 的 标题 。 并 且 从 搜索 引擎 优化 的 角度 来 说 ，h1、h2、h3 和 h4 这 4 个 
标签 会 被 赋予 一 定 的 权重 ， 而 h5 和 h6 的 权重 跟 普通 标签 差不多 ， 在 SEO 
优化 上 意义 不 大 。 

对 于 标题 h1~h6 的 语义 化 ， 我 们 需要 注意 以 下 四 个 方面 。 

(1) 一 个 页 面 只 能 有 一 个 h1 标 签 。 

(2) hl 一 h6 之 间 不 要 断层 。 

(3) 不 要 用 h1~h6 来 定义 样式 。 


(4) 不 要 用 div 来 代替 h1~h6。 








1. 一 个 页 面 只 能 有 一 个 hil 标签 








hil 标签 表示 每 个 页 面 中 最 局 层级 的 标题 ， 搜 索引 擎 会 赋予 hl 标签 最 
高 权重 。 虽 然 W3C 没 有 明确 规定 一 个 页 面 不 能 有 多 个 hl 标签 ， 但 是 我 们 
还 是 推荐 “一 个 页 面 一 个 hl 标签 ”的 做 法 。 如 果 一 个 页 面 出 现 多 个 h1， 对 
搜索 引擎 可 能 不 好 ， 也 可 能 会 被 判 以 作弊 。 就 像 你 写 文 章 一 样 ， 一 个 页 
面 就 等 于 一 篇 文章 ， 你 见 过 一 篇 文章 有 多 个 主 标题 的 么 ? 








2. hl~~h6 之 间 不 要 出 现 断 层 


搜索 引擎 对 h1~~h6 标 签 比较 敏感 ， 尤 其 是 hl1 和 h2。 一 个 语义 民 好 的 





页 面 ，h1 一 ph6 应 该 是 完整 有 序 而 没有 出 现 断 层 的 。 也 就 是 说 ， 要 按 
照 *h1、h2、h3、h4” 这 样 的 顺序 依次 排列 下 来 ， 不 要 出 现 “h1、h3、 
h4” 而 漏 掉 h2 的 情况 。 


3. 不 要 用 h1 一 h6 来 定义 样式 


我 们 都 知道 h1~h6 是 有 默认 样式 的 ， 如 图 2-1 所 示 。 在 实际 开发 
中 ， 很 多 时 候 我 们 需要 为 文本 定义 字体 加 粗 或 者 字体 大 小 。 有 些 人 喜欢 
用 h1~h6 来 代 蔡 CSS， 使 用 标签 来 控制 样式 ， 这 是 一 种 非常 不 好 的 做 
法 。 我 们 一 定 要 记 住 ，HTML 关 注 的 是 结构 (语义 ) ，CSS 关 注 的 是 样 
式 ， 结 构 跟 样式 应 该 分 离 。 





这 是 一 级 标题 
这 是 二 级 标题 
这 是 三 级 标题 

这 是 四 级 标题 

这 是 五 级 标题 


， 这 是 六 级 标题 


图 2-2 hl1~h6 在 浏览 器 中 的 效果 


4. 不 要 用 div 来 代替 h1~h6 





从 语义 上 来 说 ， 一 个 页 面 的 标题 应 该 使 用 h1 一 h6 标 签 ， 不 要 使 用 
div 来 代 蔡 。 


举例 : 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
body{font-family: "微软 雅 黑 ";font-size:14px;} 
.COntent 


{ 


width:366pX; 
padding:16pX; 
border:1px dashed gray 


} 


.Content div 
{ 
font-size:16pX; 
font-weight:bold; 
height:24px; 
line-height:24px; 
} 
</style> 
</head> 
<body> 
<div class="content"> 
<div>web 前 端 开发 </div> 
<p>web 前 端 开发 最 核心 3 个 技术 : HTML、CSS 和 JavaScript。HTML 控 制 网 页 的 结构 
</div> 
</body> 
</html> 











在 浏览 器 预览 效果 如 图 2-3 所 示 。 


: web 前 端 开发 


，web 前 端 开发 最 核心 3 个 技术 : HTML、CSS 和 
， JavaScript。HTML 控 制 网 页 的 结构 ，CSS 控 制 网 ， 
， 页 的 样式 ，jJavaScript 控 制 网 页 的 行为 。 


图 2-3 _ ”div 实现 的 标题 效果 


div 是 无 语义 的 标签 ， 如 果 使 用 div 来 代 蔡 h js 
难 ， 而 且 关 县 和 0 入 Se 4h1~h6, 后 期 维护 比较 困 
蕉 ， 而 且 对 SEO 影响 也 非常 大 ， 因为 这 种 做法 会 让 一 个 页 面 丢失 大 量 的 








2.3 ”图 片 语义 化 


在 HTML 中 ， 我 们 使 用 img 标 签 来 表示 图 片 。 对 于 图 片 的 语义 化 ， 
我 们 从 以 下 两 个 方面 来 深入 探讨 一 下 。 


(1) alt 属 性 和 title 属 性 。 





(2) figure 元 素 和 figcaption 元 素 。 
2.3.1 alt 属 性 和 title 属 性 
img 标 签 有 两 个 重要 属性 : alt 和 title。 


alt 属 性 用 于 图 片 描述 ， 这 个 描述 文字 是 给 搜索 引擎 看 的 。 并 且 当 图 
片 无 法 显示 时 ， 页 面 会 显示 alt 中 的 文字 。 


title 属 性 也 用 于 图 片 描述 ， 不 过 这 个 描述 文字 是 给 用 户 看 的 。 并 且 
当 鼠 标 指针 移 到 图 片上 时 ， 会 显示 title 中 的 内 容 。 


语法 : 





<img src=""” alt=" 图 片 描述 (给 搜索 引擎 看 ) "title=" 图 片 描 述 (给 用 户 看 )"> 








说 明 : 


搜索 引擎 跟 人 不 一 样 ， 它 看 不 出 一 张 图 片 描绘 的 是 什么 东西 ， 它 只 
会 但 看 HTML 代 码 ， 通 过 img 标 签 的 alt 属 性 或 者 页 面 上 下 文 来 判断 图 片 
的 内 容 。 因 此 ， 对 于 img 标 签 ， 我 们 一 定 要 添加 alt 必 性， 以便 搜 索引 擎 
ee 
定 的 权重 。 





请 一 定 要 注意 : alt 属 性 是 img 标 签 必需 属性 ， 一 定 要 添加 ;title 属性 
是 img 标 签 可 选 属 性 ， 可 加 可 不 加 。 建 议 大 家 在 实际 开发 中 ， 对 于 img 标 
签 ， 要 记得 在 alt 属 性 中 添加 必要 的 描述 信息 。 





2.3.2” ”figure 元 素 和 figcaption 元 素 


HTML 入 门 教程 


图 2-4 “图 片 + 图 注 ? 效 果 


对 于 如 图 2-4 所 示 的 这 种 “图 片 + 图 注 * 的 效果 ， 我 们 可 以 使 用 如 下 代 
码 来 实现 。 











<div class="img-list"> 
<img src="" alt=""/> 


<span>HTML 入 门 教程 </ span> 
<div> 








但 是 这 种 实现 方式 的 语义 并 不 好 。 在 HTML 5 中 ， 引 入 了 figure 和 
figcaption 两 个 元 素来 增强 图 片 的 语义 化 。 


语法 : 


<figure> 
<img src="" alt=""/> 


<figcaption></figcaption> 
</figure> 





说 明 : 





figure 元 素 用 于 包含 图 片 和 图 注 ，figcaption 元 素 用 于 表示 图 注 文 
字 。 在 实际 开发 中 ， 对 于 “图 片 + 图 注 ” 效 果 ， 我 们 都 建议 使 用 figure 和 
figcaption 这 两 个 元 素来 实现 ， 从 而 使 得 页 面 的 语义 更 加 恨 好 。 


2.4 是 表格 语义 化 


不 少 初学 者 看 了 《Web 前 端 开 发 精品 课 HIML 和 CSS 基 础 教程 》 
《本 书 的 姊妹 篇 ) 跑 来 问 :“ 不 是 说 表格 布局 已 经 被 抛弃 了 吗 ? 为 什么 
还 要 在 书 里 讲解 表格 呢 ? 这 不 是 多 此 一 举 吗 ? ”其实 不 然 ， 在 实际 开发 
中 ， 我 们 不 建议 使 用 表格 布局 ， 应 该 使 用 浮动 布局 或 者 定位 布局 。 虽 然 
的 方式 被 抛弃 了 ， 但 是 这 并 没有 说 明 表 格 就 一 无 是 处 














问 大 家 一 个 问题 : 如 图 2-5 所 示 的 这 种 表格 数据 的 展示 ， 应 该 怎么 
实现 呢 ? 不 少 得 了 “table 疏 惧 症 ?的 小 伙伴 可 能 会 想到 使 用 div 来 模拟 表 
格 。 事 实 上 ， 对 于 这 种 表格 数据 形式 ， 最 好 的 选择 还 是 table。 








font-weight 届 性 


| 说 明 


normal 默认 值 ， 正 常 体 

lighter 较 细 

bold 较 粗 

bolder 很 粗 ( 其 实效 果 跟 bold 差 不 多 ) 


图 2-5 ”绿叶 学 习 网 中 的 表格 


在 表格 中 ， 我 们 比较 常用 的 标签 是 table、tr 和 td 这 3 个 。 不 过 为 了 加 
强 表格 的 语义 化 ，W3C 还 增加 了 5 个 标签 : 也 、caption、thead、tbody 和 
tfoot。th 表 示 “ 表 头 单 元 格 ”; caption 表 示 “ 表 格 标 题 ?。thead、tbody 和 
tfoot 这 3 个 标签 把 表格 从 语义 上 分 为 三 部 分 : 表 头 、 表 喘 和 表 脚 。 有 了 
这 几 个 标签 ， 表 格 语义 更 加 民 好 ， 结 构 更 加 清晰 。 对 于 这 5 个 标签 ， 我 
TI 己 经 做 了 详细 的 介绍 ， 这 里 就 不 再 著述 。 表 格 标签 
上 表 2-1 所 不 。 





表 2-1 表格 标签 





| 
. 
芯 


table 


em 


表 头 《语义 划分 ) 











表 身 《语义 划分 ) 











攻 尾 〈 语 义 划 分 ) 



























































<table> 
<caption> 表 格 标题 </caption> 
<!-- 表 头 --> 
<thead> 
<tr> 
<th> 表 头 单 元 格 1</thy> 
<th> 表 头 单 元 格 2</thy> 
</tr> 
</thead> 
<!-- 表 身 --> 
<tbody> 
<tr> 











<td> 标 准 单 元 格 1</td> 
<td> 标 准 单 元 格 2</td> 
</tr> 
<tr> 

















<td> 标 准 单元 格 1</td> 
<td> 标 准 单元 格 2</td> 
</tr> 
</tbody> 
<1-- 表 脚 --> 
<tfoot> 
<tr> 
<td> 标 准 单 元 格 1</td> 
<td> 标 准 单 元 格 2</td> 
</tr> 
</tfoot> 
</table> 








说 明 : 


thead、tbody 和 和 tfoot 这 三 个 标签 也 是 表格 中 非常 重要 的 标签 ， 它 从 
语义 上 区 分 了 表 头 、 表 身 和 表 脚 。 很 多 人 容易 忽略 这 三 个 标签 。 


上 述 语法 显示 效果 如 图 2-6 所 示 。 


表格 标题 
表 头 单元 格 1 表 头 单 元 格 2 
标准 单元 格 1 “标准 单元 格 2 
标准 单元 格 1 “标准 单元 格 2 
标准 单元 格 1 标准 单元 格 2 





图 2-6 表格 标签 


举例 : 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
table, thead, tbody, tfoot, th, td 
{ 


border: 1px dashed gray; 


</style> 
</head> 
<body> 


<table> 
<caption> 考 试 成 绩 表 < /caption> 
<thead> 
< 七 P> 
<th> 姓 名 </th> 
<th> 语 文 </th> 
<th> 英 语 </th> 
<th> 数 学 </th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td> 小 明 </td> 
<td>86</td> 
<td>86</td> 
<td>86</td> 
</tr> 
<tr> 
<td> 小 红 </td> 
<td>96</td> 
<td>96</td> 
<td>96</td> 
</tr> 
<tr> 
<td> 小 杰 </td> 
<td>166</td> 
<td>166</td> 
<td>166</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<td> 平 均 </td> 
<td>96</td> 
<td>96</td> 
<td>96</td> 
</tr> 
</tfoot> 
</table> 
</body> 
</html> 








在 浏览 器 预览 效果 如 图 2-7 所 示 。 


条 让 
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图 2-7 表格 语义 化 实例 


分 析 : 


对 于 thead、tbody 和 tfoot 这 3 个 标签 ， 不 一 定 能 够 全 部 都 用 得 上 ， 例 
如 tfoot 束 很 少 用 。 一 般 情况 下 ， 我 们 都 是 根据 实际 需要 来 使 用 这 3 个 标 


签 的 。 








2.5 ”表单 语义 化 


表单 跟 表格 ， 这 是 两 个 完全 不 一 样 的 概念 ， 不 过 还 是 有 不 少 初学 者 
傻 傻 分 不 清 。 对 于 表单 语义 化 ， 我 们 从 2 个 方面 来 探究 一 下 。 


(1) label 标 签 。 





《2) fieldset 标 签 和 legend 标 签 。 
对 于 图 2-8 所 示 效 果 ， 我 们 可 能 会 使 用 如 下 HTML 代 码 来 实现 。 


<form action="index.aspx" method="post"> 
<div> 登 录 绿 叶 学 习 网 </div> 
<p> 
<Span> 账 号 : </span><input type="text" name="name" /> 
</p> 
<p> 


<span> 密 码 : </span><input type="password" name="pwd" /> 
</p> 
<input type="checkbox"” name="remember-me"” /><span> 记 住 我 </spany> 
<input type="submit"” value=" 登 录 "” /> 
</formy> 





登录 绿叶 学 习 网 
/ 账号 : 
密码 : 
记 住 我 | 登录 








图 2-8 ”表单 效果 
2.5.1 label 标 签 


W3C 规 范 定 义 ，label 标 签 用 于 显示 在 输入 控件 劳 边 的 说 明 性 文字 。 
也 就 是 将 茶 个 表单 元 素 和 茶 段 说 明文 字 天 联 起 来 。 











语法 : 


<1abel for=""> 说 明 性 文字 </1abel> 


说 明 : 


label 标 签 for 属 性 值 为 所 关联 的 表单 元 素 的 id， 例 如 <input id="name" 
type='"text"/>， 则 其 所 关联 的 label 标 签 应 该 为 <label for="name"> 
</lable> 。 


label 标 签 的 for 属 性 有 两 个 作用 。 
(1) 语义 上 绑 定 了 label 元 素 和 表单 元 素 。 


(2) 增强 了 鼠标 可 用 性 。 也 就 是 说 我 们 点 击 label 中 的 文本 时 ， 其 
所 关联 的 表单 元 素 也 会 获得 焦点 。 





cE 





< lIDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<div> 
<input id="Radio1l"” type="radio"/> 单 选 杠 
<input id="Checkbox1" type="checkbox" /> 复 选 杠 
</div> 
<hr/> 
<div> 
<input id="rdo" name="rdo" type="radio"/><label for="rdo"> 单 选 框 </1a 
<input id="cbk" name="cbk" type="checkbox" /><label for="cbk"> 复 选 框 
</div> 


Hl 








</body> 
</html> 
在 浏览 器 预览 效 末 如 图 2-9 所 示 。 


站 


， 国 单 选 框 日 复 选 杠 





图 2-9 ”label 标 签 与 单 选 框 / 复 选 框 





分 析 : 


从 这 个 例子 可 以 看 到 ， 在 第 一 组 表单 中 ， 我 们 只 能 点 击 单 选 框 才能 
选中 单 选 枉 ， 点 击 它 劳 边 的 说 明文 字 是 不 能 选中 的 。 在 第 二 组 表单 中 ， 
我 们 可 以 点 击 单 选 框 来 选中 单 选 框 ， 并 且 点 击 它 劳 边 的 说 明文 字 同 样 也 
可 以 选中 单 选 框 。 而 对 于 复 选 框 来 说 ， 也 是 一 样 的 效果 。 


其 实 ， 这 就 是 label 标 签 for 属 性 的 作用 。for 属 性 使 得 鼠标 单 击 的 范 
围 扩大 到 label 元 系 上 ， 极 大 地 提高 了 用 户 单 击 的 可 操作 性 。 事 实 上 ， 
人 











<input id="cbk" type="checkbox” /><label for="cbk"> 复 选 框 </1abel> 





<label> 复 选 框 <input id="cbk" type="checkbox"/></label> 





对 于 图 2-8 中 的 效果 ， 我 们 使 用 label 标 签 来 增强 语义 化 ， 修 改 后 的 
代码 如 下 。 


<form action="index.aspx" method="post"> 
<div> 登 录 绿叶 学 习 网 </div> 
<p> 
<label for="name" > 账号: </label><input type="text" id="name" name=" 
</p> 
<p> 


<label for="pwd" > 密码 : </label><input type="password" id="pwd" name= 
</p> 





<input type="checkbox" id="remember-me" name="remember-me"/><label for= 
<input type="submit"” value=" 登 录 "/> 
</formy> 





2.5.2 ”fieldset 标 签 和 legend 标 签 


在 表单 中 ， 我 们 还 可 以 使 用 fieldset 标 签 来 给 表单 元 素 进行 分 组 。 其 
中 ，legend 标 签 用 于 定义 某 一 组 表单 的 标题 。 





百 法 : 


<fieldset> 
<legend> 表 单 组 标题 </legend> 








</fieldset> 





说 明 : 


使 用 fieldset 和 legend 标 签 有 两 个 作用 。 
(1) 增强 表单 的 语义 。 


(2) 可 以 定义 fieldset 元 素 的 disabled 属 性 来 禁用 整个 组 中 的 表单 元 
FE 


对 于 图 2-8 中 的 效果 ， 我 们 使 用 fieldset 和 legend 这 两 个 标签 来 增强 语 
义 化 ， 修 改 后 的 代码 如 下 。 





<form action="index.aspx" method="post"> 


<fieldset> 
<legend> 登 录 绿 叶 学 习 网 </legend> 
<p> 


<label for="name"> 账 号: </1label><input type="text" id="name" nam 
</p> 


<p> 

<label for="pwd" > 密码 : </label><input type="password" id="pwd" n 
</p> 
<input type="checkbox" id="remember-me" name="remember-me" /><label 


<input type="submit"” value=" 登 录 "” /> 
</fieldset> 
</form> 





在 浏览 器 预 吃 效果 如 图 2-10 所 示 。 


一 登录 绿叶 学 习 网 
账号 : 
记 住 我 | 登录 














2-10 ”加 入 fieldset 和 legend 的 表单 


分 析 : 


我 们 可 以 看 到 ， 使 用 了 fieldset 和 legend 这 两 个 标签 之 后 ， 表 单 形成 
了 非常 美观 的 “书签 ”效果 。 


2.6 (Wt 义 化 


2.6.1 换行 符 <br> 


很 多 新 手 会 使 用 <br/> 标 签 来 换行 ， 或 者 使 用 多 个 <br/> 标 签 来 实现 
元 素 之 间 的 上 下 间距 。 


举例 1: 


<div> 
<span> 标 题 </ span><br/><br/> 
<span> 第 1 部 分 内 容 </span><br/> 


<span> 第 2 部 分 内 容 </ span><br/> 
<span> 第 3 部 分 内 容 </ span> 
</divy> 





举例 2: 


<form action="index.aspx" method="post"> 
<fieldset> 
<legend> 登 录 绿 叶 学 习 网 </legend> 
<label for="name"> 账 号 : </1abel><input type="text" id="name" name="n 


<label for="pwd"> 密 码 : </label><input type="password" id="pwd" name= 
<input type="checkbox" id="remember-me" name="remember-me"/><label 1 
<input type="submit"” value=" 登 录 " /> 
</fieldset> 
</form> 





上 面 两 个 例子 使 用 <br/> 标 签 的 方式 是 错误 的 ， 这 也 是 <br/> 标 签 很 
常见 的 错误 用 法 。 事 实 上 ，<br/> 标 签 有 自己 特定 的 语义 ， 不 能 随便 用 
来 实现 换行 效果 。W3C 标 准 规定 ，<br/> 标 签 仅仅 用 于 段落 中 的 换行 ， 
不 能 用 于 其 他 情况 。 也 就 是 说 ，<br> 标 签 只 适合 用 于 p 标 签 内 部 的 换 


举例 ; 


<!DOCTYPE htm]> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 


<body> 

<p> 广 东 省 <br /> 广州 市 <br /> 黄埔 大 道 西 661 号 </p> 
</body> 
</html> 
































在 浏览 占 预 览 效 果 如 图 2-11 所 示 。 


0 











图 2-11 ” <br> 标签 的 正确 用 法 











2.6.2 ”无 序列 表 uul 


在 实际 开发 中 ， 对 于 列表 型 的 数据 ， 为 了 实现 民 好 的 语义 ， 我 们 还 
是 建议 使 用 无 序列 表 或 者 有 序列 表 ， 不 建议 使 用 div 等 来 实现 。 
mm | 
. 园 css 教程 : 
JavaScript 教程 











图 2-12 ”列表 效果 
对 于 如 图 2-12 所 示 效 果 ， 不 少 新 手 很 可 能 会 写 出 如 下 代码 来 实现 。 
<div> 





<div><span>1</span>HTML 教 程 </divy> 

<div><span>2</span>CSS 教 程 </divy> 

<div><span>3</span>JavaScript 教 程 </div> 
</div> 











这 种 实现 方式 缺乏 语义 化 ， 并 且 也 不 利于 维护 。 正 确 的 做 法 是 : 


<U]> 
<1i><span>1</span>HTML 教 程 </1i> 
<1i><span>2</span>CSsS 教 程 </1i> 


<1i><span>3</span>JavaScript 教 程 </1i> 
</ul> 














有 人 问 ， 每 一 个 列表 项 前 都 有 数字 ， 不 应 该 使 用 有 序列 表 来 实现 
吗 ? 为 什么 这 里 使 用 无 序列 表 来 实现 呢 ? 假如 使 用 有 序列 表 ， 我 们 是 做 
不 到 这 种 外 观 效果 的 。 因 为 有 序列 表 前 的 数字 外 观 是 固定 的 。 在 实际 开 
发 中 ， 大 多 数 情况 下 都 是 使 用 无 序列 表 ， 极 少 情 况 下 会 使 用 有 序列 表 。 





Bai 灌 百度 


站 屿 网 页 由 凤 28 天 未 须 片 涪 芒 世态 全 文 记 更 各 >> 





会 图 全 国 


图 2-14 ”绿叶 学 习 网 的 图 片 列表 


2.6.3 strong 标 签 和 em 标签 





图 2-15 ”strong 和 em 标签 效果 


strong 用 于 实现 加 粗 文 本 ，em 用 于 实现 斜体 文本 。 基 于 结构 和 样式 

分 离 的 原则 ， 标 签 仅 仅 是 为 了 实现 简单 的 加 粗 或 者 斜体 效果 ， 我 们 一 般 
术 会 用 这 两 个 。 实 际 上 ，W3C 对 这 两 个 标签 赋予 “强调 ”的 语义 ， 在 
strong 或 者 em 标签 内 部 的 文本 被 强调 为 重要 文本 。 并 且 搜 索引 擎 对 这 两 
个 标签 也 赋予 一 定 的 权重 。 如 果 在 一 个 页 面 中 ， 为 了 SEO 而 想 要 突出 某 
些 关 键 字 ， 可 以 使 用 strong 和 em 这 两 个 标签 。 一 般 情 况 下 ， 我 们 都 是 去 
掉 strong 和 em 的 默认 样式 ， 然 后 使 用 CSS 重 新 定义 新 的 样式 ， 但 这 并 不 
影响 这 两 个 标签 的 语义 。 也 就 是 说 ， 样 式 只 会 改变 标签 的 外 观 ， 但 不 会 
改变 标签 的 语义 。 对 于 去 除 标签 的 默认 样式 ， 我 们 在 后 面 “4.5 CSS 


reset” 一 节 会 详细 介绍 。 








2.6.4 ” del 标签 和 ins 标 签 





在 HIML 中 ，del 和 ins 这 两 个 标签 是 配合 使 用 的 。del 表 示 “delete”， 
用 于 定义 被 删除 的 文本 。ins 表 示 “insert”， 用 于 定义 被 更 新 的 文本 。 一 
般 情 况 下 ， 我 们 会 使 用 CSS 来 重新 定义 del 和 ins 标 签 的 样式 。 


举例 : 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 











<p> 新 鲜 的 新 西 兰 奇异 果 </p> 
<p><del> 原 价 :站 6.58/kg</del></p> 
<p><ins> 现 在 仅 售 : 站 4.66/kg</ins></p> 
</body> 
</html> 























在 浏览 器 预 吃 效果 如 图 2-16 所 示 。 


新 鲜 的 新 西 兰 奇异 果 
,原价 :6- 586/ 
， 现 在 仅 售 ， 半 4. 00/kg ， 


图 2-16 _ del 标签 和 ins 标 签 效 果 
. = 
2.6.5” img 标签 


想 要 在 页 面 显 示 一 张 图 片 ， 我 们 有 两 种 方式 ， 一 是 使 用 img 标 签 ; 
二 是 使 用 背景 图 片 。 这 两 种 实现 方式 最 明显 的 区 别 在 于 : 使 用 img 标 签 
添加 图 片 ， 是 通过 HTML 来 实现 ;使 用 背景 图 片 ， 是 通过 CSS 来 实现 。 


在 实际 开发 中 ， 很 多 人 添加 图 片 的 方式 很 随意 。 对 于 什么 时 候 使 用 
img 标 签 ， 什 么 时 候 使 用 背景 图 片 ， 并 不 是 很 清楚 我 们 应 该 根据 HTML 
的 语义 来 判断 。 如 果 图 片 作为 HTML 的 一 部 分 ， 并 且 想 要 被 搜索 引擎 识 
别 ， 则 应 该 使 用 img 标 签 ， 例 如 第 见 的 各 种 图 片 列 表 。 如 果 图 片 仅仅 是 
起 到 修饰 作用 ， 并 且 不 想 被 搜索 引擎 识别 ， 则 应 该 使 用 背景 图 片 。 


举 个 例子 ， 图 2-17 这 个 页 面 中 的 图 标 图 片 就 应 该 使 用 背景 图 片 实 
现 ， 因 为 这 些 图 标 并 不 需要 被 搜索 引擎 识别 ， 也 不 作为 HTML 的 一 部 
分 。 而 图 2-18 页 面 中 应 该 使 用 img 标 签 来 实现 ， 因 为 这 是 页 面 HTML 结 
构 的 一 部 分 ， 并 且 和 希望 和 "搜索 引擎 识别 。 




















HTML <header> 标签 


浏览 器 支持 
IE Firefox Chrome safari Opera 
E 和 和 人 0 
全 7 
internet Explorer 9+, Firefox, Opera, Chrome 以 及 Safan 支持 <header> 标签 。 


注释 : internet Explorer 8 以 及 如 早 的 版 本 不 支持 <header> 标签。 


图 2-17 ”背景 图 片 实现 的 效果 


在 线 T 具 


喇 pa 


在 线 油 色 板 


json 编 辑 器 程序 员 老 黄历 


图 2-18 img 标签 实 现 的 效果 


以 上 只 是 列举 了 在 实际 开发 中 比较 常见 的 语义 标签 ， 其实 HTML5 
新 增 了 很 多 吉 构 语义 标签 ， 例 如 header、nav、aside、footer、article、 
section 等 。 如 果 想 要 实现 语义 更 为 展 好 的 页 面 ， 我 们 也 应 该 去 关注 这 些 


新 增 的 标签。 不 过 久 吉 构 语义 标签 是 HTML5 的 内 容 ， 因 此 本 书 不 展开 介 


270 0 (Ea 


前 面 这 几 市 ， 我 们 介绍 了 页 面 语义 化 需要 注意 的 各 个 地 方 。 那 么 平 
常 有 什么 好 的 办 法 来 判断 一 个 页 面 是 否 语义 良好 呢 ? 一 个 很 简单 的 办 法 
就 是 : 去 掉 CSS 样 式 ， 然 后 看 页 面 是 人 否 还 具有 很 好 的 可 读 性 。 


我 们 都 知道 ， 很 多 HTML 标签 都 有 一 定 的 默认 样式 ， 例 如 p 标 签 有 
上 下 边 距 、strong 标 签 对 字体 加 粗 、 则 标签 有 缩 进 效 末 ， 等 等 。 


在 前 面 我 们 接触 过 ， 我 们 可 以 使 用 一 个 标签 来 代 蔡 另外 一 个 标签 ， 
并 且 使 用 CSS 修 饰 来 实现 相同 的 效果 。 也 就 是 说 ， 不 同 的 HTML 标 签 可 
以 通过 不 同 的 CSS 来 实现 相同 的 效果 。 但 是 “一 个 语义 恨 好 的 页 面 ? 跟 “一 
个 语义 不 好 的 页 面 ? 在 去 除 样式 之 后 的 表现 却 是 截然 不 同 的 。 








一 、 列 表 
HTNL 教 程 
; CSS 教程 
: JavaScript 教 程 
登录 绿叶 学 习 网 
: 账号 : 
窗 码 ， 

记性 我 ， 登录 


图 2-19 语义 不 好 的 页 面 去 掉 样 式 后 的 表现 











一 二 前科 


。 HTIL 教 程 
。 [SS 教程 
。 JavaScript 教 程 


二 、 表 单 

， 王 登录 绿叶 学 习 网 
账号 ， 
密码 ， 


记 住 我 | 登录 | 





图 2-20 ”语义 民 好 的 页 面 去 掉 样 式 后 的 表现 


从 上 面 两 张 图 我 们 可 以 看 出 : 一 个 语义 民 好 的 页 面 在 CSS 裸奔? 之 
后 ， 可 读 性 也 是 非常 高 的 。 想 要 查看 一 个 页 面 在 “CSS 裸 奔 ” 下 的 效果 ， 
我 们 可 以 使 用 Firefox 浏 览 器 的 一 款 网 页 调试 插件 “Web Developer” 来 测 
人 


在 Web Developer 工 具 栏 找到 “CSS”-“Disable Styles”-, “Disable All 
Styles” 并 且 选 中 ， 就 可 以 查看 页 面 去 掉 样 式 后 的 效果 ， 如 图 2-21 所 示 。 
Web Developer 插 件 的 安装 和 使 用 ， 请 自行 搜索 ， 很 简单 。 


-~-------------------------------------------------------------------1 


rs Images" @ Iniormation" 闻 Miscellaneous" f Outline" f Resize* ， 
: Cheese (0) Disable Al Syles ~ AhsShift+A | 
Add User Style Sheet... Disable Browser Defauk Styles 









Display Style Information Alt+Shifts @ Disable Embedded Styles 

Display Styles By Media Type » Disable Inline Styles 

Edit CSS Alt :<h Disable Linked Style Sheets 
Reload Unked Style Sheets Disable Print Styles 

Lse Border Sox Model Disable Indvidual Style Sheet = » 





View CSS 


| 


图 2-21 Web Developer 界 面 


2.8 HTML5 人 舍弃 的 标签 


在 HTML5 中 ， 除 了 新 增 标签 之 外 ， 也 有 不 少 标签 被 舍弃 了 ， 如 表 2- 
2 和 表 2-3 所 示 。 为 了 实现 页 面 的 语义 化 ， 我 们 在 实际 开发 中 不 应 该 再 去 
使 用 这 些 标 签 。 因 此 了 解 哪些 标签 已 经 被 舍弃 是 非常 有 必要 的 。 


对 于 这 些 被 舍弃 的 标签 ， 总 体 可 以 分 为 两 大 类 。 
(1) 仅仅 为 了 定义 样式 ， 没 有 任何 语义 ， 因 此 被 舍 奔 。 
(2) 很 少 使 用 或 者 已 经 航 新 标签 代 符 ， 因 此 被 舍弃 。 


表 2-2 HTML5 舍 弃 的 标签 〈( 仅 为 了 定义 样式 ) 











面 文本 的 默认 字体 、 颜 色 或 尺寸 














定义 删除 线 文本 


定义 删除 线 文本 


表 2-3 HIML5 舍 弃 的 标签 〈 很 少 使 用 或 者 已 被 新 标签 代替 ) 














说 明 








标 签 
dir 定义 目录 列表 ， 应 该 用 ul 代替 


Co xm 应 obbr 代 
证 文 庆 和 的 applet 应 该 object 人 全 
定义 与 文档 相关 的 可 搜索 索引 























定义 frameset 中 的 一 个 特定 的 框架 
为 那些 不 支持 框架 的 浏览 器 显示 文本 














对 于 HTML 语 义 化 ， 我 们 需要 注意 以 下 两 点 。 


(1) 我 们 应 该 果断 舍弃 那些 仅 仪 为 了 定义 样式 而 存在 的 HTML 标 
签 。 如 果 仅 仅 是 为 了 改变 样式 ， 我 们 应 该 使 用 CSS 来 实现 ， 不 要 使 用 
HTML 标 签 。 


(2) 在 不 同 的 页 面部 分 ， 我 们 优先 使 用 正确 的 语义 化 标签 。 如 果 
没有 语义 标签 可 用 ， 才 去 考虑 div 和 span 等 无 语义 标签 。 


”CSS 进 阶 





3.1 CSS 单位 


在 CSS 入 门 阶段 ， 我 们 大 都 习惯 使 用 px 作为 单位 。 其 实在 CSS 中 ， 
除了 px， 还 有 很 多 其 他 常用 单位 。 总 体 来 说 ，CSS 单 位 分 为 两 大 类 : 绝 
对 单位 和 相对 单位 。 


3.1.1 绝对 单位 


在 CSS 中 ， 绝 对 单位 定义 的 大 小 是 固定 的 ， 使 用 的 是 物理 度量 单 
位 ， 显 示 效 果 不 会 受到 外 界 因 系 影 响 ， 如 表 3-1 所 示 。 绝 对 单位 一 般 多 





用 于 传统 平面 印刷 ， 而 极 少 用 于 前 端 开 发 。 
表 3-1 CSS 绝 对 单位 








在 前 端 开 发 中 ， 我 们 都 不 会 用 到 绝对 单位 ， 因 此 在 这 里 只 需要 简单 
了 解 一 下 在 CSS 中 有 绝对 单位 这 回 事 即 可 。 


3.1.2 ”相对 单位 


在 CSS 中 ， 相 对 单位 定义 的 大 小 是 不 固定 的 ， 一 般 是 相对 其 他 长 度 
而 言 。 在 CSS 中 ， 和 常用 的 相对 单位 如 表 3-2 所 示 。 


表 3-2 CSS 相 对 单位 





除了 上 面 这 些 ，CSS 相 对 单位 还 有 ex、vw 和 vh 等 。 这 里 我 们 只 需要 
认真 学 握 上 表 中 的 单位 ， 其 他 的 相对 单位 很 多 都 是 用 于 移动 端 开 及 。 在 
将 来 接触 移动 端 开 发 时 ， 我 们 再 来 认真 学 习 。 

1. px 


px， 全称 pixel (像素 ， 指 的 是 一 张 图 片 中 最 小 的 点 ， 或 者 是 计算 机 
屏 闫 中 最 小 的 点 。 


举 个 例子 ， 图 3-1 是 一 个 新 浪 图 标 。 


图 3-1 ”新浪 图 标 








将 这 个 图 标 放 大 n 们 后 效果 如 图 3-2 所 示 。 


图 3-2 ”放大 后 的 新 浪 图 标 








我 们 发 现 ， 原 来 一 张 图 片 是 由 很 多 的 小 方 点 组 成 的 。 其 中 ， 每 一 个 
小 方 点 就 是 一 个 像素 (px) 。 


一 台 计 算 机 的 分 辩 率 是 800pxx600px， 指 的 就 是 “计算 机 显示 屏 宽 是 
800 个 小 方 点 ， 高 是 600 个 小 方 点 ”。 


严格 来 说 ，px 也 是 属于 相对 单位 ， 因 为 屏幕 分 辨 率 的 不 同 ，1px 的 
大 小 也 是 不 同 的 。 例 如 Windows 系 统 的 分 辨 率 为 每 英寸 96pX，osX 系 统 
的 分 辩 率 为 每 英寸 72pX。 如 果 不 考虑 屏幕 分 辨 率 ， 我 们 也 可 以 把 px 当 作 
绝对 单位 来 看 待 ， 这 也 是 为 什么 很 多 地 方 说 px 是 绝对 单位 的 原因 。 














2. % 


在 CSS 中 ,支持 百分比 作为 单位 的 属性 很 多 ， 大 致 可 以 分 为 三 大 


六 


(1) width、height、font-size 的 百分比 是 相对 于 父 元 素 “ 相 同属 
性 ”的 值 来 计算 的 。 


(2) line-height 的 百分比 是 相对 于 父 元 素 的 font-size 值 来 计算 的 。 


(3) vertical-align 的 百分比 是 相对 当前 元 素 的 line-height 值 来 计算 
的 。 


line-height 和 vertical-align 这 两 个 属性 有 点 特殊 ， 在 后 面 章 节 会 有 详 
细 介 绍 。 拿 font-size 属 性 来 说 ， 如 果 父 元 素 width 为 100px， 子 元 素 width 
为 50%， 则 表示 子 元 素 实 际 width 为 50px。 如 果 父 元 素 font-size 为 30px， 
子 元 素 font-size 为 50%， 则 表示 子 元 素 实 际 font-size 为 15px。 

















ls 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#father 


width:260px; 
height:166pX; 
border:1px solid blue; 
font-size:36pX; 


} 


#son 


width:56%; 
height:562%; 
border:1px solid red ; 
font-size:502%; 
} 
</style> 
</head> 
<body> 
<div id="father"> 
绿叶 学 习 网 
<div id="son"> 绿 叶 学 习 网 </div> 
</div> 
</body> 
</html> 





在 浏览 吉 预 览 效 果 如 图 3-3 所 示 。 








图 3-3 ”百分比 单位 


3. em 





在 CSS 中 ，em 是 相对 于 “当前 元 素 ” 的 字体 大 小 而 言 的 。 其 中 ，1em 
等 于 “当前 元 素 ” 字 体 大 小 。 这 里 的 字体 大 小 指 的 是 以 px 为 单位 的 font- 
size 值 。 例 如 ， 当 前 元 素 的 font-size 值 为 10px， 则 1lem 等 于 10px; 当前 元 
素 的 font-size 值 为 20px， 则 lem 等 于 20px， 以 此 类 推 。 








此 外 需要 注意 一 下 ， 如 果 当 前 元 素 的 font-size 没 有 定义 ， 则 当前 元 
素 会 继承 父 元 素 的 font-size。 如 果 当 前 元 素 的 所 有 祖先 元 素 都 没有 定义 
font-size， 则 当前 元 素 会 继承 浏览 器 默认 的 font-size。 其 中 ， 所 有 浏览 右 
默认 的 font-size 值 都 是 16px。 


在 CSS 中 ， 使 用 em 作为 单位 有 以 下 三 个 小 技巧 。 
(1) 首 行 缩 进 使 用 text-indent:2em 实 现 
我 们 都 知道 在 网 页 排版 中 ， 段 钞 的 首 行 一 般 会 缩 进 两 个 字 的 距离 。 


如 果 要 实现 这 个 效果 ，text-indent 值 应 该 是 font-size 值 的 两 倍 。 此 时 ， 我 
们 使 用 “text-indent:2em” 就 可 以 轻松 实现 。 


举例 : 





<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 


<style type="text/css"> 


font-size:14px; 
text-indent:2em; 
width:368px; 
} 
</style> 
</head> 
<body> 
<h3> 爱 连 说 </h3> 
<p> 水 陆 草 木 之 花 ， 可 爱 者 甚 蕾 。 晋 陶渊明 独 爱 菊 。 自 李 唐 来 ， 世 人 甚 爱 牡 丹 。 了 予 独 爱 j 
































<p> 予 谓 允 ， 花 之 隐逸 者 也 ; 牡丹， 论 之 富足 者 也 ;， 茵 ， 花 之 君子 者 也 。 嘲 ! 菊 之 爱 ， 陶 
</body> 
</html> 











在 浏览 噩 预览 效果 如 图 3-4 所 示 。 


爱 莲 说 


水 陆 草 木 之 礼 ， 可 爱 者 甚 著 。 吾 陶 渊 明 独 爱 菊 。 自 李 
唐 来 ， 世 人 其 爱 牡丹 。 予 独 爱 莲 之 出 淤泥 而 不 染 ， 人 
而 不 妖 ， 中 通 外 直 ， 不 莹 不 枝 ， 香 远 蔓 清 ， 亭 亭 净 植 ， 

远 观 而 个 可 狼 瑰 疆 。， a 

. 予 谓 菊 , 社 之 隐 侈 者 也 ; 牡丹 ， 社 之 富贵 者 也 ; 莲 ， 
社 之 君子 者 也 。 喧 ! 菊 之 爱 ， 陶 后 鲜 有 闻 ; 莲 之 爱 ， 同 子 
者 何人 ? 牡丹 之 爱 ， 宜 卑 众 疾 。 


图 3-4 em 作为 单位 实例 图 〈1) 


分 析 : 


在 这 个 例子 中 ，“text-indent:2em;” 等 价 于 “text-indent:28px;”。 对 于 
首 行 缩 进 ， 使 用 em 作为 单位 会 比 使 用 px 作为 单位 更 好 。 为 什么 呢 ? 
为 使 用 px 作为 单位 ， 如 果 我 们 定义 font-size 为 14px， 则 text-indent 就 应 该 
定义 为 28px; 如 果 我 们 定义 font-size 为 15px， 则 text-indent 就 应 该 定义 为 
30pXx， 以 此 类 推 .….... 但 是 当 我 们 使 用 em 作为 单位 时 ， 不 管 font-size 定 义 
~、 我 们 只 需要 将 text-indent 定 义 为 2em 即 可 。 不 需要 计算 ， 非 常 
方便 


(2) 使 用 em 作为 统一 单位 
首先 ， 我 们 要 非 第 清楚 一 点 : 所 有 浏览 需 默 认 字 体 大 小 都 是 16px。 


如 果 在 一 个 页 面 中 ， 我 们 想 要 统一 使 用 em 作为 单位 ， 此 时 可 以 拿 
默认 字体 大 小 开刀 。 也 就 是 说 ， 对 于 任何 元 素 我 们 都 不 需要 设置 font- 
size 为 多 少 px， 而 是 继承 根 元 素 的 font-size 值 〈 即 16px) ， 然 后 再 使 用 
em 换算 即 可 。 


如 果 使 用 浏览 器 默认 字体 大 小 〈16px) ， 其 中 em 与 px 对 应 关系 如 
下 


lem = 16pxx1 = 16px 
6.75em = 16pxx0.75 = 12px 


为 了 简化 font-size 的 计算 ,我们 在 CSS 中 提前 声明 “body{font- 
size:62.5%;}”。 通 过 这 个 声明 ， 我 们 可 以 使 得 默认 字体 大 小 变 为 
16pxx62.5%=10px， 此 时 em 与 px 对 应 关系 如 下 。 


lem = 16px 
6.75em = 7.5pX 


也 就 是 次， 我 们 只 需要 将 原来 的 px 值 除 以 10， 然 后 换 上 em 作为 单 
位 就 行 了 。 这 是 一 个 非常 棒 的 技巧 。 在 实际 开发 中 ， 如 采 我 们 想 要 统一 
使 用 em 作为 单位 ， 都 是 使 用 这 个 技巧 。 大 家 仔细 琢磨 以 下 两 个 实例 ， 
认真 理解 一 下 em 的 用 法 。 











举例 : 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
body{font-size:62.5%;} 
#p1{font-size:1em;} 
#p2{font-size:1.5em;} 


#p3{font-size:2em;} 
</style> 
</head> 
<body> 
<p id="p1"> 当 前 字体 大 小 为 1em， 也 就 是 19px</p> 
<p id="p2"> 当 前 字体 大 小 为 1.5em， 也 就 是 15px</p> 
<p id="p3"> 当 前 字体 大 小 为 2em， 也 就 是 26px</py> 
</body> 
</html> 











在 浏览 占 预 览 效 果 如 图 3-5 所 示 。 


当前 字体 大 小 为 1em， 也 就 是 10px 
当前 字体 太 小 为 1. 5en， 也 就 是 15px 


: 当前 字体 大 小 为 2em， 也 就 是 20px ， 


图 3-5 ”em 作为 单位 实例 图 (2) 


一 个 p 元 素 width 为 150px，height 为 75px，font-size 为 15px，text- 
indent 为 30px。 如 果 我 们 想 要 全 部 使 用 em 作为 单位 ， 该 如 何 实 现 呢 ?请 
看 下 面 的 例子 。 


举例 ; 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 

<style type="text/css"> 
*{padding:6;margin:0;} 
html{font-size:62.5%;} 
p{display:inline-block;border:1px solid silver;} 
/* 使 用 px 作为 单位 */ 
#p1 
{ 

















font-size:15px; 


width:156pX; 
height:75px; 
text-indent:36px; 


} 
/* 使 用 em 作为 单位 */ 
#p2 


font-size:1.5em; 
width:16em; 
height:5em; 
text-indent:2em; 
} 
</style> 
</head> 
<body> 
<p id="p1"> 绿 叶 学 习 网 成 立 于 2815 年 4 月 1 日 ， 
<p id="p2"> 绿 叶 学 习 网 成 立 于 2815 年 4 月 1 日 ， 
</body> 
</html> 








个 证 有 活力 的 技术 学 习 网 站 。</p>< 
个 证 有 活力 的 技术 学 习 网 站 。</p> 


























人 世代 














在 浏览 器 预览 效果 如 图 3-6 所 示 。 


绿叶 学 习 网 成 立 于 
2015 年 4 月 1 日 , 是 一 
个 富有 活力 的 技术 学 习 

绿叶 学 习 网 成 立 于 
2015 年 4 月 1 日 , 是 一 
er 


图 3-6 ”em 作为 单位 实例 图 (3) 
分 析 : 


在 这 个 例子 中 ， 我 们 分 别 使 用 px 和 em 作为 单位 ， 从 而 得 出 对 比 效 
果 。 有 些小 伙伴 可 能 会 产生 疑惑 : 使 用 em 作为 单位 时 ，width 不 应 该 是 
15em 吗 ， 为 什么 是 10em 呢 ?height 不 应 该 是 7.5em 吗 ， 为 什么 是 5em 呢 ? 





很 多 初学 者 都 会 有 这 样 的 疑问 。 不 过 很 好 解决 ， 我 们 回 过 头 来 看 看 








em 的 定义 : 在 CSS 中 ，em 是 相对 于 “当前 元 素 ” 的 字体 大 小 而 言 的 。 其 
中 ，1em 等 于 “当前 元 系 ” 字 体 大 小 。 


稍微 琢磨 一 下 ， 大 家 都 会 明白 为 什么 了 。 其 实在 这 个 例子 中 ， 当 前 
元 素 的 font-size 为 10pxx1.5em=15px， 如 果 width 和 height 也 要 以 em 为 单 
位 ， 就 要 以 当前 元 素 的 font-size 值 (15px) 再 计算 一 次 。 


width: 156px/15px = 16em 
height: 75px/15px = 5em 
也 就 是 说 ， 在 实际 开发 中 ， 对 于 em， 我 们 一 般 需 要 计算 两 次 ， 第 
次 ， 当 前 元 素 font-size 属 性 的 px 值 ， 第 二 次 ， 当 前 元 素 其 他 属性 (如 
width、height 等 ) 的 px 值 。 


(3) 使 用 em 作为 字体 大 小 单位 


对 于 一 个 页 面 的 字体 大 小 ， 使 用 px 作为 单位 时 可 扩展 性 不 好 ， 使 用 
百分比 作为 单位 时 也 不 符合 习惯 ， 最 佳 选择 是 使 用 em 作为 单位 来 定义 
字体 大 小 。 使 用 em 作为 单位 ， 当 需要 改变 页 面 整体 的 文字 大 小 时 ， 我 
们 只 需要 改变 根 元 系 字 体 大 小 即 可 ， 工 作 量 变 得 非常 少 。em 这 个 特点 
在 路 平台 网 站 开 及 中 有 者 明显 的 优势 。 




















4. rem 


rem， 全 称 font size of the root element， 指 的 是 相对 于 根 元 素 〈( 即 
html 元 素 ) 的 字体 大 小 。rem 是 CSS3 新 引入 的 单位 ， 目 前 除了 IE8 及 以 前 
版 本 之 外 ， 大 部 分 主流 浏览 器 都 是 文 持 rem 的 。rem 布 局 是 也 是 移动 端 最 
常用 的 字体 大 小 之 一 。 


我 们 可 以 通过 这 个 网 址 查看 rem 的 支持 情况 : 





http://caniuse.com/#search=rem 。 


rem 跟 em 很 相似 ， 不 过 也 有 明显 区 别 : em 是 相对 “当前 元 素 ” 的 字体 
大 小 ， 而 rem 是 相对 “ 根 元 素 ” 的 字体 大 小 。 这 里 的 font-size 指 的 都 是 以 px 
为 单位 的 font-size 值 。 








举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
html{font-size:62.5%;} 
#father 
{ 


width:260px; 
height:166pX; 
border:1px solid blue; 
font-size:2rem; 


} 


#son 
{ 
width:156px; 
height:166pX; 
border:1px solid red ; 
font-size:2rem; 
} 
</style> 
</head> 
<body> 
<div id="father"> 
绿叶 学 习 网 
<div id="son"> 绿 叶 学 习 网 </div> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 3-7 所 示 。 


| 











图 3-7 ”rem 作为 单位 
分 析 : 
从 这 里 我 们 可 以 看 出 ，rem 是 相对 根 元 素 (html 元 素 ) 的 font-size 而 
言 啊 。 


【疑问 】 
在 实际 开发 中 ，CSS 单 位 用 px 好 ， 还 是 用 em 好 呢 ? 


在 国外 大 部 分 主流 网 站 都 是 使 用 em 作为 单位 ， 而 且 W3C 也 建议 我 
们 使 用 em 作为 单位 。 但 是 我 们 发 现 国 内 大 多 数 网 站 ， 包 括 三 大 门户 “新 
浪 、 搜 狐 、 网 易 * 等 ， 痢 是 采用 px 作为 单位 。 这 是 为 什么 呢 ? 原 来 在 国 
外 ， 特 别 是 美国 ， 有 一 些 法 律 规定 网 站 要 具有 适应 性 。 对 于 下 以 前 的 版 
本 无 法 调整 那些 使 用 px 作为 单位 的 字体 大 小 ， 但 现在 的 正版 本 几乎 都 文 
en 因为 用 px 作为 单位 非常 方便 计算 








3.2 CSS 特 性 


CSS 具 有 两 大 特性 : 继承 性 和 层 县 性 。 这 里 我 们 详细 给 大 家 介绍 一 
下 CSS 的 这 两 个 特性 。 


3.2.1 ”继承 性 


CSS 的 继承 性 ， 指 的 是 子 元 素 继 承 了 父 元 素 的 某 些 样式 属性 ， 例 如 
在 父 元 素 定 义 字体 颜色 〈color 属 性 ) ， 子 元 素 会 继承 父 元 素 的 字体 颜 
色 。 不 过 我 们 要 注意 ， 并 不 是 所 有 属性 都 上 共有 继承 性 ， 如 padding、 
margin、border 等 就 不 具备 继承 性 。 其 实 小 伙伴 们 稍微 想 一 下 ， 要 是 
padding、margin、border 这 些 属性 有 继承 性 ， 那 可 是 一 件 很 玖 怖 的 事 
情 。 














CSS 的 制定 者 〈《W3C 组 织 ) 为 我 们 考虑 得 很 周到 ， 只 有 那些 能 够 给 
我 们 轻松 书号 的 属性 才 可 以 继承 。 在 CSS 中 ， 具 有 继承 性 的 属性 有 三 大 
Ro 


(1) 文本 相关 属性 : font-family、font-size、font-style、font- 
weight、 font、line-height、text-align、text-indent、word-spacing。 


(2) 列表 相关 属性 : list-style-image、list-style-position、list-style- 
type、 list-style; 


(3) 颜色 相关 属性 : color。 


举例 ; 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 
<style type="text/css"> 
#father{color:Red;font-weight:bold} 


</style> 


</head> 
<body> 
<div id="father"> 
绿叶 学 习 网 
<div id="son"> 绿 叶 学 习 网 </div> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 3-8 所 示 。 


r-----------------7 


. 绿叶 学 习 网 ; 
,绿叶 学 习 网 ， 


图 3-8 CSS 继承 性 例子 (1) 








分 析 : 


这 里 为 父 元 素 定 义 了 color 和 font-weight 两 个 属性 ， 从 预览 效果 中 我 
们 可 以 看 到 ， 子 元 素 继承 了 父 元 素 的 这 两 个 属性 值 。 





举例 : 





< IlDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#father{color:Red;font-weight:bold} 
</style> 
</head> 
<body> 
<div id="father"> 
绿叶 学 习 网 
<a href="http://www.lvyestudy.com"> 绿 叶 学 习 网 </a> 


</div> 
</body> 
</html> 


在 浏览 器 预览 效果 如 图 3-9 所 示 。 
绿叶 学 习 网 绿叶 学 习 网 ; 


图 3-9 CSS 继承 性 例子 (2) 





分 析 : 





喷 ， 怎 么 回 事 ? 不 是 说 color 是 继承 属性 吗 ? 为 什么 在 父 元 素 定 
义 “color:Red”， 子 元 素 (a 元 素 ) 却 没 有 变 成 红色 呢 ?” 其 实 这 是 因为 a 标 
签 本 身 有 默认 的 颜色 样式 ， 优 先 级 比 继承 的 要 高 。 如 果 想 要 改变 a 标 签 
的 颜色 ， 必 须 选 中 a 标 签 进 行 操 作 才 行 。 对 于 a 标 签 这 个 特点 ， 我 们 在 实 
际 开 发 中 会 经 浓 倍 到 。 


利用 CSS 继 承 性 ， 有 时 候 我 们 可 以 少 写 很 多 代码 。 像 上 面 这 个 例 
子 ， 我 们 只 需要 在 父 元 系 中 定义 属性 ， 就 不 需要 在 子 元 素 中 重复 定义 
了 。 在 实际 开发 中 ， 我 们 应 该 充分 利用 CSS 的 继承 性 ， 从 而 减少 重复 代 
码 的 编写 。 这 也 使 得 我 们 的 CSS 代 码 更 加 精简 优雅 。 





3.2.2” 层 闭 性 


在 学 习 CSS 层 登 性 之 前 ， 先 问 大 家 一 个 问题 ， 如 果 在 网 页 中 ， 对 于 
同一 个 元 素 ， 我 们 重复 定义 了 多 个 相同 的 属性 时 ，CSS 会 怎么 处 理 呢 ? 
先 看 一 个 具体 实例 。 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div{color:Red;} 
div{color:Orange;} 


div{color:Blue;} 
</style> 
</head> 
<body> 
<div> 绿 叶 学 习 网 </div> 
<div> 绿 叶 学 习 网 </div> 
<div> 绿 叶 学 习 网 </div> 


</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 3-10 所 示 。 





图 3-10 ”CSS 层 又 性 例子 (1) 


分 析 : 


在 这 个 例子 中 ， 我 们 首先 定义 了 所 有 div 闫 色 为 Red， 然 后 定义 所 有 
div 颜 色 为 Orange， 最 后 定义 所 有 div 颜 色 为 Blue。 由 于 CSS 的 层 县 
性 , “color:Orange;” 会 和 Red;”， 然 后 “color:Blue;” 会 履 
盖 “color:Orange;”。 因此 ， 最 终 所 有 div 元 素 的 颜 页 色 为 Blue。 


CSS 的 层 登 性 ， 指 的 吏 是 样式 的 履 闸 。 对 于 同一 个 元 系 来 说 ， 如 采 
我 们 重复 定义 多 个 相同 的 属性 ， 并 且 这 些 样 式 具 有 相同 的 权重 ，CSS 会 
以 最 后 定义 的 属性 的 值 为 准 ， 也 就 是 “后 来 者 后 上 ”原则 。 














站 例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title></title> 


<style type="text/css"> 
/* 单 独 定义 第 2 个 div 颜 色 为 purple*/ 
#second{color:Purple;} 
/* 定 义 所 有 div 颜 色 为 red*/ 
div{color:Red;} 
</style> 
</head> 
<body> 
<div> 绿 叶 学 习 网 </div> 
<div id="second"> 绿 叶 学 习 网 </div> 
<div> 绿 叶 学 习 网 </div> 





</body> 
</html> 





在 浏览 絮 预 换 效 果 如 图 3-11 所 示 。 


绿叶 学 习 网 ， 
绿叶 学 习 网 ， 
绿叶 学 习 网 ; 


图 3-11 CSS 层 县 性 例子 (2) 


分 析 : 





喷 ， 这 又 是 阅 哪 出 ? 按 “ 后 来 者 大 上 ”原则 ， 所 有 div 颜 色 最 终 都 应 该 
是 Red， 为 什么 第 二 个 div 颜 色 还 是 Purple 呢 。 其 实 , “后 来 者 居 上 ”原则 
必须 符合 三 个 条 件 。 


(1) 元 素 相 同 。 
(2) 属性 相同 。 
(3) 权重 相同 。 


权重 ， 指 的 是 选择 器 的 权重 。 在 接 下 来 的 “CSS 优 先 级 ”一 节 中 ， 我 
们 再 详细 介绍 








3.3” CSS 优先 级 


CSS， 全 称 Cascading Style Sheet 〈 层 县 样式 表 ) 。 很 多 人 就 只 知道 
CSS 是 用 来 控制 样式 的 ， 并 没有 深入 理解 “ 层 琶 "这 两 个 字 的 含义 。 


层 善 ， 其 实 指 的 就 是 样式 的 履 盖 。 当 样式 的 履 盖 发 生 冲 突 时 ， 以 优 
先 级 高 的 为 准 。 当 “同一 个 元 素 ” 的 “同一 个 样式 属性 ”被 运用 上 多 个 属性 
值 时 ， 我 们 就 需要 遵循 一 定 的 优先 级 规则 来 选择 属性 值 了 。 

样式 覆盖 发 生 冲 突 常见 的 共有 以 下 五 种 情况 。 
引用 方式 冲突 。 
继承 方式 冲突 。 
指定 样式 冲突 。 
继承 样式 与 指定 样式 冲突 。 





a 


(1 


Wa 


C2 


Wa 


(3 


— 


(4 


WA 


(5 
3.3.1 引用 万 式 冲 突 

我 们 知道 CSS 有 三 种 常用 的 引入 方式 : 外 部 样式 、 内 部 样式 和 行内 
人 CSS 引 用 方式 的 不 同 ， 也 会 产生 冲突 。 这 三 种 引入 方式 优先 级 如 

行内 样式 >《〈 内 部 样式 = 外 部 样式 ) 

行内 样式 的 优先 级 最 高 ， 内 部 样式 与 外 部 样式 优先 级 相同 。 如 果 内 


部 样式 与 外 部 样式 同时 存在 ， 则 以 最 后 引入 的 样式 为 准 (后 来 者 忆 
) 。 


!important。 


举例 ; 


<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<link href="index.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
div{color:Orange;} 
</style> 
</head> 


<body> 

<div style="color:Blue;"> 绿 叶 学 习 网 </div> 
</body> 
</html> 





图 3-12 引用 方式 冲突 实例 


分 析 : 


在 这 个 例子 中 ， 我 们 定义 外 部 样式 为 “color:Red”， 内 部 样式 
为 “color:Orange;”， 行内 样式 为 “color:Blue;”。 从 优先 级 角度 出 
发 , “color:Orange;” 会 覆盖 “color:Red;j”， 然 后 “color:Blue;” 会 履 
盖 “color:Orange”。 因 此 字体 最 终 颜 色 为 Blue。 


3.3.2 ”继承 方式 冲突 
如 果 由 于 继承 方式 引起 的 冲突 ， 则 “最 近 的 祖先 元 素 ” 获 胜 。 继 承 ， 


指 的 是 CSS 的 继承 性 。 祖 先 元 素 ， 指 的 是 当前 元 素 的 父 元 素 、“ 和 他 ”元 
素 .…… 当 然 , “和 他? 元 素 只 是 一 个 形象 的 叫 法 。 








举例 : 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
body{color:Red;} 
#grandfather{color:Green;} 
#father{color:Blue;} 
</style> 
</head> 
<body> 
<div id="grandfather"> 
<div id="father"> 
<div id="son"> 绿 叶 学 习 网 </div> 
</div> 
</div> 
</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 3-13 所 示 。 


绿叶 学 习 网 





图 3-13 ”继承 方式 冲突 实例 


分 析 : 





由 于 继承 方式 引起 的 冲突 ， 最 近 的 祖先 元 素 获 胜 ， 字 体 最 终 颜 色 为 
Blue。 在 这 个 例子 中 ，#son 元 素 的 最 近 祖 先 元 素 为 #father 元 素 。 如 果 
#father 元 素 没 有 定义 color 属 性 ， 则 最 近 祖 先 元 素 为 #grandfather 元 素 。 


3.3.3 ”指定 样式 冲突 


所 谓 的 指定 样式 ， 指 的 是 指定 “当前 元 际 ? 的 样式 。 当 直接 指定 的 样 
式 肥 生 冲 突 时 ， 样 式 权 值 高 者 获胜 。 


在 CSS 中 ， 各 种 选择 器 的 权 值 如 表 3-3 所 示 。 











表 3-3 选择 器 权 值 


























行内 样式 


常见 的 伪 元 素 只 有 四 个 : 即 ::before、::after、::first-letter、::first- 


line。 伪 类 我 们 经 常见 到 ， 如 :hover、:first-child 等 


。 常 用 的 选择 器 优先 
级 如 下 。 





行内 样式 > id 选 择 器 > class 选 择 右 > 元 素 选 择 右 


侍 例 ; 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<title></title> 
<«style type="text/css"> 
#1lvye{color:Red;} 
.lvye{color:Green;} 
div{color:Blue;} 
</style> 
</head> 
<body> 
<div id="lvye” class="1vye" > 绿叶 学 习 网 <C/divy> 
</body> 
</html> 





在 浏览 絮 预 换 效 呆 如 图 3-14 所 示 。 





图 3-14 ”指定 样式 冲突 实例 (1) 


id 选择 器 权重 最 高 ， 因 此 div 元 素 color 属 性 最 终 值 为 Red。 这 里 要 注 
意 一 点 ， 我 们 不 应 该 只 从 样式 顺序 来 判断 。 因 为 只 有 选择 堪 权 重 相同 
时 ， 才 会 遵从 “后 来 者 居 上 ”原则 。 





举例 ; 





“<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#0outer p 


/* 权 值 =168+1=1861*/ 
color:Red; 


} 


#outer .inner 


/* 权 值 =196+16=116*/ 
color :Green; 


} 


#outer p strong 


/* 权 值 =196+1+1=162*/ 
color:Blue; 


} 


#outer p span strong 


/* 权 值 =1686+1+1+1=163*/ 
color:Purple; 
} 
</style> 
</head> 
<body> 
<div id="outer"> 
<p class="inner"> 
<span><strong> 绿 时 学 习 网 </strong></spany> 
</p> 
</divy> 
</body> 
</html> 





在 浏览 占 预 览 效 果 如 图 3-15 所 示 。 


图 3-15 ”指定 样式 冲突 实例 (2) 


分 析 : 


在 预览 效果 中 ， 我 们 可 以 看 到 strong 标 签 的 文本 颜色 为 Purple( 紫 
色 ) 。 怎 么 回 事 ? 按 道理 说 ， “#outer .inner{}” 的 权重 最 高 ， 文 本 颜色 应 
该 为 Green (绿色 ) 啊 。 





其 实 之 所 以 产生 这 种 疑问 ， 那 是 因为 小 伙伴 们 没有 认真 理解 “指定 
样式 冲突 ?是 怎样 一 回 事 。 所 谓 的 指定 样式 冲突 ， 指 的 是 “当前 元 素 ” 的 
样式 发 生 冲 突 。 


在 这 个 例子 中 ， 我 们 所 针对 的 当前 元 素 是 strong， 然 而 “#outer 
.inner{}” 针 对 的 元 素 是 p(strong 的 祖先 元 素 ) ， 并 不 是 strong。 


;准确 来 说 ， 如 果 当 前 元 素 为 stkong， 则 “#outer .inner{}” 和 “<#outer 
ss 在 继承 样式 中 ， 我 们 是 不 能 用 选择 器 权重 这 一 套 东 
西 来 计算 的 。 


由 此 我 们 可 以 总 结 : 在 CSS 中 ， 选 择 右 权重 的 计算 只 针对 指定 样式 
(当前 元 素 ) ， 并 不 能 用 于 继承 样式 。 


3.3.4 ”继承 样式 和 指定 样式 冲突 
当 继 承 样式 和 指定 样式 发 生 冲 突 时 ， 指 定 样式 获胜 。 








举例 : 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
body{color:Red;} 
#0outer{color:Green;} 
#0outer #inner{color:Blue;} 
span{color:Purple;} 
strong{color:Black;} 
</style> 
</head> 
<body> 
<div id="outer"> 
<p class="inner"> 
<span><strong> 绿 时 学 习 网 </strong></spany> 
</p> 
</div> 
</body> 


</html> 


在 浏览 器 预览 效果 如 图 3-16 所 示 。 


[dr de he rr | 


| 


图 3-16 ”继承 样式 和 指定 样式 冲突 实例 








分 析 : 


由 于 CSS 的 继承 性 ，strong 元 素 分 别 从 body、div 和 p 这 三 个 元 素 继 承 
了 color 属 性 ， 但 是 这 些 都 属于 继承 样式 。 最 后 ， 由 
于 “strong{color:Black;}” 这 一 人 句 指 定 了 strong 元 素 的 color 属 性 (指定 样 
式 ) ， 因 此 最 终 strong 元 素 color 属 性 为 Black。 


对 于 样式 冲突 ， 我 们 不 能 笼统 地 用 权重 值 来 计算 ， 例 
如 “body{color:Red;}” 权 重 值 为 1，“#outer{color:Green;}” 为 100，“#outer 
#inner{color:Blue;}” 权 重 值 为 200,， “span{color:Purple;}”* 权 重 值 为 
1, “strong{color:Black;}” 权 重 值 为 1， 然 后 就 判断 strong 元 素 color 属 性 为 
Blue。 


在 CSS 中 ， 选 择 占 权重 值 的 计算 只 针对 指定 样式 (当前 元 系 ) ， 并 
不 能 用 于 继承 样式 。 当 继承 样式 和 指定 样式 发 生 冲 突 时 ， 指 定 样 式 获 
胜 。 我 们 先 判 断 指 定 样式 ， 然 后 才 考 虑 继承 样式 。 


3.3.5 limportant 


在 CSS 中 ， 我 们 可 以 使 用 !important 规 则 来 改变 样式 的 优先 级 。 如 果 
一 个 样式 使 用 !important 来 声明 ， 则 这 个 样式 会 覆盖 CSS 中 任何 的 其 他 样 
式 声 明 。 也 就 是 说 ， 如 果 你 一 定 要 使 用 某 个 样式 属性 ， 为 了 不 让 它 被 履 
盖 ， 则 可 以 使 用 !important 来 实现 。 换 句 话 说， 如 果 你 想 要 履 盖 其 他 所 
有 样式 ， 可 以 使 用 !important 来 实现 。 





举例 : 


<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#0outer strong 
{ 
/* 权 重 =1686+1=161*/ 
color:Red; 


} 


#0outer .inner strong 


/* 权 重 =1680+16+1=111*/ 
color :Green; 


} 


.inner strong 


/* 权 重 =10+1=11*/ 
color:Blue; 


} 


.inner span strong 


{ 


/* 权 重 =16+1+1=12*/ 
color:Purple; 


} 


strong 


{ 


} 
</style> 
</head> 
<body> 
<div id="outer"> 
<p class="inner"> 
<span><strong> 绿 叶 学 习 网 </strong></span> 
</p> 
</div> 
</body> 
</html> 


color:Black !important; 





在 浏览 絮 预 换 效 呆 如 图 3-17 所 示 。 


Eee 


Li 





图 3-17 ”!important 实 例 
\、 
分 析 : 


在 预览 效果 中 ，strong 元 素 color 属 性 值 为 Black。 按 正常 来 
说 ，“#outer .inner strong{}” 权 值 最 高 ，strong 元 素 color 属 性 值 应 该 是 
Green。 但 是 由 于 “strong{}” 中 应 用 了 !important， 因 此 strong 元 素 color 属 
性 值 最 终 为 Black。 


1. !important 用 处 


在 CSS 中 ，!important 常 抑 有 两 种 使 用 情况 。 
(1) 情况 一 


#SomeId p{color:Red;} 
p{color:Green;} 


在 外 层 有 #someld 的 情况 下 ， 你 怎样 才能 让 p 变 为 Green 呢 ?在 这 种 
情况 下 ， 如 果 不 使 用 !important， 则 第 一 条 样式 永远 比 第 二 条 样式 优先 
级 更 高 。 

(2) 情况 二 

我 们 可 能 会 页 到 这 种 情况 ， 你 或 者 同事 写 了 一 些 效果 很 差 的 行内 样 
式 〈 行 内 样式 优先 级 往往 是 最 高 的 ) ， 假 如 你 要 在 内 部 样式 表 或 者 外 部 
样式 表 中 修改 这 个 样式 ， 你 就 应 该 想到 在 内 部 样式 表 或 者 外 部 样式 表 中 
使 用 !important 来 覆盖 那些 行内 样式 。 


举 一 个 活生生 的 例子 : 有 人 在 jQuery 插件 中 写 了 糟糕 的 行内 样式 ， 
而 你 需要 在 CSS 文 件 中 修改 这 些 样式 。 





2. 如 何 履 闸 !important 
想 要 和 窗 盖 !important 声 明 的 样式 很 简单 ， 共 有 两 种 解决 方法 。 
(1) 使 用 相同 的 选择 器 ， 再 添加 一 条 !important 的 CSS 语 句 。 


不 过 这 个 CSS 语 句 得 放 在 后 面 。 因 为 在 优先 级 相同 的 情况 下 ， 后 面 
定义 的 会 履 盖 前 面 定义 的 (后 来 者 大 上 ) 。 


(2) 使 用 更 高 优先 级 的 选择 器 ， 再 添加 一 条 !important 的 CSS 语 

使 用 “大 杀 堪 ”important 可 以 将 样式 提升 到 最 高 等 级 ， 不 管 这 个 样式 
在 哪个 样式 表 还 是 在 哪个 选择 器 中 。 如 果 在 同一 样式 中 出 现 了 多 
个 !important， 则 遵循 后 来 者 大 上 原则 。 

在 实际 开发 的 过 程 中 ， 经 常会 碰 到 写 在 后 面 的 样式 被 写 在 前 面 的 样 
式 绑 新 了 ， 这 时 候 束 应 该 考虑 一 下 是 否 是 CSS 优 先 级 引起 的 问题 。 了 解 
CSS 优 先 级 的 这 些 规则 ， 能 为 我 们 提高 不 少 开 发 效率 。 对 于 样式 冲突 这 
五 种 情况 ， 我 们 只 需要 认真 地 把 每 一 个 规则 都 理解 一 壳 即 可 ， 并 不 需要 
记 住 。 经 过 一 定 的 实战 ， 我 们 自然而然 会 有 深刻 的 理解 。 

总 而 言 之 ， 对 于 CSS 优 先 级 ， 主 要 就 是 以 下 两 个 黄金 定律 。 

(1) 优先 级 高 的 样式 履 善 优先 级 低 的 样式 。 

(2) 同一 优先 级 的 样式 ， 后 定义 的 履 盖 先 定义 的 ， 即 后 来 者 居 





3.4 CSS 引入 方式 


在 初学 者 阶段 ， 我 们 接触 了 三 种 CSS 引 入 方式 ， 我 们 来 简单 回顾 一 
下 


(1) 外 部 样式 表 。 
(2) 内 部 样式 表 。 
(3) 行内 样式 表 。 


除了 这 三 种 方式 ， 在 CSS 中 其 实 还 有 一 种 @import 方 式 〈 即 “导入 样 
式 表 ”) 。@import 方 式 跟 外 部 样式 表 很 相似 。 不 过 在 实际 开发 中 ， 我 们 
极 少 使 用 @import 方 式 ， 而 更 倾 癌 于 使 用 link 方 式 〈 外 部 样式 ) 。 原 因 在 
于 @import 方 式 先 加 载 HTML 后 加 载 CSS， 而 link 先 加 载 CSS 后 加 载 
HTML。 如 果 HTML 在 CSS 之 前 加 载 ， 页 面 用 户 体 验 非 常 拳 。 因 此 ， 我 
们 不 需要 去 了 解 @import 方 式 。 





举例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<title></title> 
<1-- 这 是 外 部 样式 ，CSS 样 式 在 外 部 文件 中 定义 --> 
<link href="index.css" rel="stylesheet" type="text/css" /> 
<1-- 这 是 内 部 样式 ，CSS 样 式 在 style 标 签 中 定义 --> 
<style type="text/css"> 
p{color:Red;} 
</style> 
</head> 
<body> 
<1-- 这 是 行内 样式 ，CSS 样 式 在 元 素 style 属 性 中 定义 --> 
<p style="color:Blue;"> 绿 叶 学 习 网 </p> 
《p> 绿叶 学 习 网 </p> 
<p> 绿 叶 学 习 网 </p> 




















</body> 
</html> 
3.4.1 ”外 部 样式 表 


外 部 样式 表 是 最 理想 的 CSS 引 用 方式 。 在 实际 开发 当中 ， 为 了 提升 
网 站 性 能 和 可 维护 性 ， 一 般 都 是 使 用 外 部 样式 表 。 所 谓 的 “外 部 样式 
表 ”， 就 是 把 CSS 代 码 和 HTML 代 码 单 独 放 在 不 同文 件 中 ， 然 后 在 HTML 
文档 中 使 用 link 标 签 来 引用 CSS 样 式 表 。 


当 样 式 需 要 被 应 用 到 多 个 页 面 时 ， 外 部 样式 表 是 最 理想 的 选择 。 使 
用 样式 表 ， 就 可 以 通过 更 改 一 个 CSS 文 件 来 改变 整个 网 站 的 外 观 。 

外 部 样式 表 在 单独 文件 中 定义 ， 并 且 在 <head></head> 标 签 对 中 使 
用 1link 标 签 来 引用 。 
3.4.2 ”内 部 样式 表 

我 们 都 知道 外 部 样式 表 是 最 理想 的 CSS 引 用 方式 ， 那 是 不 是 意味 着 
内 部 样式 表 和 行内 样式 表 这 两 种 方式 就 一 无 是 处 昵 ? 肯定 不 是 。 


在 实际 开发 中 ， 相 同 频 道 的 页 面 都 会 有 相同 的 样式 。 对 于 这 种 公有 
样式 ， 我 们 一 般 会 放 在 外 部 样式 表 中 。 例 如 绿叶 学 习 网 的 所 有 文章 页 面 
都 同属 一 个 频道 ， 这 些 页 面 都 具有 相同 的 样式 (假如 CSS 文 件 为 
article.css) ， 如 图 3-18 所 示 。 














3.5 字体 相 细 font-weight 


员 要 0 


一 、font-weight 民 性 

在 CS5 中 ， 使 用 fomt-weight 属 性 地 定义 字体 得 运 。 

芒 学 省 要 注 章 ， 六 他 祖 远 和 六 体 六 小 ( font-size ] 因 不 一 择 的 ， 稚 顽 指 的 是 字体 的 “名 胖 广 
八 指 的 是 嘉和 次， 关 家 闻 好 理解 一 下 就 祖 容 区 区 分 了 ， 

许 法 : 

zh+t 柑 迎 条 
说 明 : 
祖 红 仁 可 以 职 关 宇 子 iD100--900 的 歼 面 ， 关 雪 李 知 下 实 


股 相 ( 其 六 这 于 轨 bold 兰 不 名 


闻 你 给 池 font-weight 原 性 里 可 以 取 100、200 900 记 九 个 依 ，400 查 当 于 正常 字体 normal 
700 相 当 于 bold。，100~900 分 别 条 示 字 杂 99 粗 泗 ， 是 对 字体 租 运 的 一 种 蜂 化 方 达 ， 什 炉 大 狐 表 示 超 


图 3-18 绿叶 学 习 网 的 文章 页 面 


当 有 一 些 页 面 需 要 “个 别 样式 ?时 ， 此 时 我 们 就 不 应 该 把 这 些 “ 个 别 
样式 ? 放 在 “公有 样式 ”(article.css) 中 去 。 因 为 这 些 个 别 样式 只 应 用 在 
几 个 页 面 ， 如 宋 我 们 把 这 些 个 别 样式 放 到 公有 样式 中 ， 会 导致 万 有 页 面 
都 加 载 一 次 个 别 样式 ， 这 样 会 影响 加 载 速度 。 明 到 这 种 情况 时 ， 我 们 区 
不 能 蛙 纯 只 用 外 部 样式 表 来 解决 ， 比 较 好 的 解决 方法 是 在 这 些 需要 定 
义 个 别 样式 的 页 面 中 使 用 内 部 样式 表 来 定义 。 


在 绿叶 学 习 网 文章 页 面 中 ， 大 部 分 页 面 的 表格 都 是 两 列 的 ， 因 此 我 
们 把 两 列表 格 样式 放 入 公有 样式 (article.css〉 中。 但 是 有 极 个 别 页 面 需 
要 用 到 三 列表 格 ， 如 图 3-19 所 示 。 此 时 ， 我 们 在 需要 用 到 的 页 面 中 的 内 
部 样式 表 中 定义 即 可 。 








transform-origin 属 性 取 值 


关键 宇 百分比 说 明 
top left 00 在 下 
top center 50% 0 靠 上 居中 
top right 100% 0 右上 
left center 0 50% 靠 左 居中 
center center 50% 50% 正中 
right center 100% 50% 靠 右 居中 
bottom left 0 100% 左下 
bottom center 50% 100% 靠 下 居中 
bottom right 100% 100% 右 下 


图 3-19 ”绿叶 学 习 网 文章 页 面 的 三 列表 格 
3.4.3 ”行内 样式 表 
在 一 个 样式 非常 多 的 页 面 里 ， 我 们 只 在 一 个 小 地 方 进行 样式 修改 


(如 加 粗 、 改 变 颜 色 等 ) 。 像 这 种 样式 修改 只 出 现 一 两 次 ， 并 且 修 改 幅 
度 小 。 此 时 ， 我 们 更 倾向 于 使 用 行内 样式 来 实现 。 


举例 : 


“<!DOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title></title> 


</head> 
<body> 
<div><span style="font-weight:bold;color:red;"> 绿 叶 学 习 网 </span> 成 立 于 2 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 3-20 所 示 。 


ee 


' 绿叶 学 

i Eh 
' 绿叶 学 习 网 为 前 端 开发 以 及 后 端 开 
;发 兴趣 爱好 者 提供 各 种 精品 教程 以 


及 最 精华 资料 。 


Dee 


图 3-20 ”行内 样式 实例 


分 析 : 





在 这 个 例子 中 ， 我 们 要 实现 对 “绿叶 学 习 网 ”这 个 词 进 行 加 粗 并 且 改 
变 颜 色 。 如 果 这 个 页 面 内 容 过 多 、CSS 样 式 过 大 的 话 ， 使 用 行内 样式 中 
实现 会 更 加 方便 。 首 先 ， 外 部 样式 我 们 是 不 可 能 考虑 的 。 其 次 ， 如 果 使 
用 内 部 样式 表 ， 我 们 可 能 还 得 为 这 个 span 元 系 定 义 一 个 id 或 者 class， 区 
显得 十 分 多 余 。 因 此 最 好 的 办 法 还 是 使 用 行内 样式 。 这 个 技巧 在 我 们 官 
网 也 经 常用 到 如 图 3-21 所 示 。 


10.1 CSS3 过 波 简介 
壬 (4 R11257 cp: ot 
一 、CSS3 过 渡 
我 个 通 ， transform ( 交 关 transtion (这 注 ) 和 animation ( 动画 ) 是 C553 动 国 的 3 大 而 
分 ， 上 一 节 ,我 们 按 骨 了 CS$S$3 变 形 ,过 一 节 我 们 率 恰 大 家 评 铬 笃 讨 一 下 CS53 这 天 鸡 里 ， 
在 CSS3 中 ， 我 们 可 以 使 用 transition 属 住 半 肯 元 重 的 竺 一 个 属 往 从 “一 个 敌人 性 从 ”在 指定 的 时 间 内 
下 再 地 过 年 到 “另外 一 个 属性 俏 ” 考 立 慷 动画 效 业 ( 仔 炳 理解 这 有 句 磊 ) ， 
CSS tra n 轩 性 所 实现 的 元 素 六 形 ， 星 现 的 仅仅 是 一 个 “ 姑 蛛 ” ， 丙 CSS transition 星 现 的 是 
入 辽 展 “ 过 程 ” , 通 僧 点 说 就 是 一 村 动 国 锥 所 这 程 , 知 系 旦 ， 浙 息 ， 动 国 锯 地 等， 例 旨 埠 9f 池 习 网 十 
很 多 地 方 萄 用 到 了 ( 了 滨 ， 尖 乱 各 动 上 去 的 时 则 ,者 会 有 一 定 的 这 沽 人 放 时 
语法 : 
non 左 性 持 终 封 间 过 直 


图 3-21 绿叶 学 习 网 使 用 的 行内 样式 


在 实际 开发 中 ， 我 们 应 该 灵活 地 配合 使 用 外 部 样式 表 、 内 部 样式 表 
以 及 行内 样式 表 ， 并 不 是 一 味 地 只 用 外 部 样式 表 。 事 实 上 ， 外 部 样式 表 
多 用 于 公有 样式 ， 内 部 样式 表 多 用 于 私有 样式 ， 而 行内 样式 更 多 用 于 小 
修改 或 者 优先 级 方面 。 





3.5 CSS 选择 器 


选择 器 ， 说 白 了 就 是 用 一 种 方式 把 你 想 要 的 那 一 个 标签 选中 。 把 它 
选中 了 ， 你 才能 操作 这 个 标签 的 CSS 样 式 。CSS 中 有 很 多 把 你 所 需要 的 
标签 选中 的 方式 ， 这 些 不 同 的 方式 就 是 不 同 的 选择 器 。 

在 CSS 入 门 阶段 ， 我 们 学 习 了 以 下 几 种 选择 器 。 

(1) 元 素 选 择 器 
(2) id 选择 器 

(3) class 选 择 器 
(4) 群 组 选择 器 

这 些 都 是 CSS 中 最 基本 的 选择 器 ， 大 家 可 以 到 绿叶 学 习 网 的 CSS 入 
门 教程 中 复习 一 下 ， 在 这 里 就 不 再 详细 展开 。 在 这 一 节 中 ， 我 们 给 大 家 
详细 讲解 CSS2.1 中 的 层次 选择 器 。 

层次 选择 器 ， 束 是 通过 元 系 之 间 的 层次 关系 来 选择 元 素 。 层 次 选择 
器 在 实际 开发 中 也 是 相当 重要 的 。 和 常见 的 层次 关系 包括 : 父子 、 后 代 、 
兄弟 和 相 邻 。 

在 CSS 中 ， 层 次 选择 器 共有 四 种 ， 如 表 3-4 所 示 。 

表 3-4 CSS 层 次 选择 器 





















































相 邻 选择 器 ， 选 择 M 元 素 相 邻 的 下 一 个 元 素 〈M、N 征 同 级 元 素 ) 





3.5.1 ”后代 选择 器 

后 代 选 择 器 ， 束 是 选择 元 素 内 部 中 所 有 的 某 一 个 元 素 ， 包 括 子 元 素 
和 其 他 后 代 元 素 。 
1 





说 明 : 


在 后 代 选 择 器 中 ，“M 元 素 ” 和 “N 元 素 ” 之 间 用 空格 隔 开 ， 表 示 选 中 
M 元 素 内 部 后 代 N 元 素 〈 所 有 N 元 素 ) 。 


cE 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#firstp{color:Red;} 
</style> 
</head> 
<body> 
<div id="first"> 
<p>lvye 的 子 元 素 </p> 


<p>lvye 的 子 元 素 </p> 
<div id="second"> 
<p>lvye 子 元 素 的 子 元 素 </p> 
<p>lvye 子 元 素 的 子 元 素 </p> 
</div> 
<p>lvye 的 子 元 素 </p> 
<p>lvye 的 子 元 素 </p> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效 果 如 图 3-22 所 示 。 
lvye 的 子 元 素 
1vye 的 子 元 素 
，lwye 子 元 素 的 子 元 素 ; 
le 了 元 素 的 子 元 素 : 
.lvye 的 子 元 素 : 
lyye 的 子 元 素 


图 3-22” 后代 选择 器 


分 析 : 








“#first p” 表 示 选 取 id 为 first 的 元 素 内 部 的 所 有 Pp 元 系 ， 因 此 不 管 是 子 
元 素 ， 还 是 其 他 后 代 元 素 ， 全 部 都 会 被 选中 。 


3.5.2 ”了 于 代 选 择 硕 


子 代 选 择 器 ， 就 是 选中 元 际 内 部 的 某 一 个 子 元 素 。 子 代 选 择 器 跟 后 
代 选 择 需 很 相似 ， 但 是 却 有 着 明显 的 区 别 。 


(1) 后 代 选 择 希 ， 选 取 的 是 元 系 内 部 所 有 的 元 素 〈 包 括 子 元 


素 ) 。 


(2) 子 代 选 择 需 ， 选 取 的 是 元 系 内 部 东 一 个 子 元 素 《〈 只 限 子 元 
系 ) 。 








语法 : 


说 明 : 


在 子 代 选 择 费 中 ,，“M 元 素 ”* 和 “N 元 素 ” 之 间 使 用 “>” 选 择 从 ， 表 示 选 
中 MM 元素 内 部 的 子 元 素 N。 


举例 : 





<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#first>p{color:Red;} 
</style> 
</head> 
<body> 
<div id="first"> 
<p>lvye 的 子 元 素 </p> 
<p>lvye 的 子 元 素 </p> 
<div id="second"> 
<p>lvye 子 元 素 的 子 元 素 </p> 
<p>lvye 子 元 素 的 子 元 素 </p> 
</div> 
<p>lvye 的 子 元 素 </p> 


<p>lvye 的 子 元 素 </p> 
</div> 
</body> 
</html> 


在 浏览 器 预览 效果 如 图 3-23 所 示 。 


PF--------------------------7 


lvye 的 子 元 素 

lvye 的 子 元 素 

,1vye 子 元 素 的 子 元 素 

,lvye 子 元 素 的 子 元 素 ， 

.lvye 的 子 元 素 : 
lvye 的 子 元 素 


图 3-23” 子 代 选 择 器 


分 析 : 





“#first>p” 表 示 选 中 id 为 first 的 元 素 下 的 子 元 素 p。 这 里 与 后 代 选 择 器 
的 例子 对 比 一 下 ， 我 们 很 清楚 地 知道 子 代 选择 器 只 选取 子 元 素 ， 不 包 
括 其 他 后 代 元 素 。 
3.5.3 ”兄弟 选择 器 


兄 第 选择 器 ， 就 是 选中 元 素 后 面 〈 不 包括 前 面 ) 的 茶 一 类 兄弟 元 





语法 : 


MN{} 
说 明 : 


在 兄弟 选择 器 中 ,“M 元 素 " 和 ”“N 元 素 ” 之 间 使 用 “一 ”选择 符 ， 表 示 
选中 M 元 素 后 面 的 所 有 茶 一 类 兄弟 元 素 N。 








举例 : 


< lIDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#second~p{color:Red;} 
</style> 
</head> 
<body> 
<div id="first"> 
<p>lvye 的 子 元 素 </p> 
<p>lvye 的 子 元 素 </p> 
<div id="second"> 
<p>lvye 子 元 素 的 子 元 素 </p> 
<p>lvye 子 元 素 的 子 元 素 </p> 
</div> 
<p>lvye 的 子 元 素 </p> 
<p>lvye 的 子 元 素 </p> 
</div> 
</body> 
</html> 








在 浏览 妖 预览 效果 如 图 3-24 所 示 。 


PF-------------------------- 


: lvye 的 子 元 系 
.lvye 子 元 素 的 子 元 素 ， 
lwye 子 元 素 的 子 元 素 ， 
. 1vye 的 子 元 素 : 
lvye 的 子 元 素 


图 3-24 ”兄弟 选择 器 


分 析 : 





“#second~p” 表 示 选 取 id 为 second 的 元 素 后 面 的 所 有 兄弟 元 素 p。 记 
住 ， 兄 第 选择 器 只 选取 后 面 的 所 有 兄弟 元 素 ， 不 包括 前 面 的 所 有 兄弟 元 


3.5.4 ” 相 邻 选择 器 

相 邻 选择 器 ， 就 是 选中 元 素 后 面 〈 不 包括 前 面 ) 的 茶 一 个 “ 相 邻 ?的 
人 
别 。 

(1) 兄 第 选择 占 选 取 元 系 后 面 “所 有 ”的 杂 一 类 元 素 。 

(2) 相 邻 选择 器 选取 元 系 后 面 “ 相 邻 ”的 茶 一 个 元 系 。 








语法 : 


说 明 : 


在 相 邻 选择 融 中 ,，“M 元 素 ”" 和 “N 元 素 ” 之 间 使 用 “+” 选 择 符 ， 表 示 选 
中 M 元 系 后 面 的 某 一 个 相 邻 的 兄弟 元 素 N。 


举例 : 


< IlDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#second+p{color:Red;} 
</style> 
</head> 
<body> 
<div id="first"> 
<p>lvye 的 子 元 素 </p> 
<p>lvye 的 子 元 素 </p> 
<div id="second"> 
<p>lvye 子 元 素 的 子 元 素 </p> 
<p>lvye 子 元 素 的 子 元 素 </p> 
</div> 
<p>lvye 的 子 元 素 </p> 
<p>lvye 的 子 元 素 </p> 
</div> 
</body> 
</html> 





在 浏览 絮 预 换 效 果 如 图 3-25 所 示 。 


PF-------------------------- 


lvye 的 子 元 素 


lvye 的 子 元 素 1 
,lvye 子 元 素 的 子 元 素 ; 
lvye 子 元 素 的 子 元 素 ; 
lvye 的 子 元 素 : 
1vye 的 子 元 素 


图 3-25” 相 邻 选择 器 〈1) 


“#second+p” 表 示 选 取 id 为 second 的 元 素 后 面 的 “ 相 邻 ”的 兄弟 元 素 p。 


举例 : 





<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
/* 去 除 所 有 元 素 默认 的 padding 和 margin#/ 
*{padding:6;margin:6} 
/* 去 除 列表 项 默认 符号 */ 
ul{list-style-type:none;} 
li+li{border-top:2px solid red;} 
</style> 
</head> 
<body> 
<U]> 
<1i> 第 1 个 元 素 </1i> 
<1i> 第 2 个 元 素 </1i> 











<1i> 第 3 个 元 素 </1i> 
<1i> 第 4 个 元 素 </1i> 
<1i> 第 5 个 元 素 </1i> 
<1i> 第 6 个 元 素 </1i> 
</ul> 
</body> 
</html> 








在 浏览 器 预 吃 效果 如 图 3-26 所 示 。 


图 3-26 ” 相 邻 选择 器 (2) 


分 析 : 





“li+l 使 用 的 是 相 邻 选择 器 ， 表 示 "“ 选 择 1i 元 素 相 邻 的 下 一 个 1 元 
素 "”。 由 于 最 后 一 个 li 元 素 没 有 相 邻 的 下 一 个 1 元 素 ， 所 以 对 于 最 后 一 个 1 
元 素 ， 它 是 没有 下 一 个 i 元 素 可 以 选取 的 。“li+li{border-top:2px solid 
red;}” 达 到 在 两 个 li 元 素 之 间 添 加 一 个 边框 的 效果 。 


这 是 一 个 非常 棒 的 技巧 ， 在 实际 开发 中 如 果 我 们 想 要 在 两 个 元 素 之 
间 实 现 什么 效果 (border、margin 等 ) ， 我 们 会 经 常用 到 这 个 技巧 ! 大 


例如 图 3-27 所 示 的 底部 信息 栏 就 可 以 用 这 个 技巧 来 实现 ， 大 家 可 以 
尝试 自己 实现 一 下 。 








关于 我 们 | 联系 我 们 | 版 权 声 明 | 免责 声明 | 广告 服务 | 意见 反馈 


图 3-27 绿叶 学 习 网 底部 信息 栏 


在 这 一 节 ， 其 实 我 们 主要 讲解 的 是 两 组 选择 器 。 
(1)“ 后 代 选 择 器 * 和 “ 子 代 选择 器 ”。 
(2)“ 兄 第 选择 器 * 和 “ 相 邻 选择 器 ”。 


这 样 划分 就 一 目 了 然 了 。 大 家 可 以 根据 这 个 划分 ， 深 入 对 比 ， 更 能 
加 深 理解 和 记忆 。 


至 此 ， 我 们 已 经 把 CSS2.1 中 的 选择 器 学 得 差不多 了 。 除 了 这 些 ， 其 
实在 CSS 中 ， 还 有 非常 多 重要 的 选择 器 ， 不 过 大 部 分 都 是 CSS3 新 增加 
的 。 本 书 只 是 重点 讲解 CSS2.1 的 开发 技巧 ， 对 于 CSS3 的 内 容 就 不 再 展 
开 介 绍 。 不 过 作为 过 来 人 ， 还 是 给 小 伙伴 们 一 个 温 世 建议 ，CSS3 实 在 
太 强 大 了 ， 能 够 实现 很 多 非常 棒 的 效果 ， 学 了 本 书 内 容 之 后 一 定 要 去 学 
习 一 下 CSS3。 








第 4 章 ”CSS 规范 


4.1 CSS 规 范 简介 
作为 前 端 开 发 人 员 ， 先 问 问 小 伙伴 们 在 写 CSS 时 是 否 碰 到 以 下 问 


(1) 你 总 十 看 不 异 别 人 写 的 代码 ， 或 者 读 起 来 很 吃力 ? 
(2) 你 总 是 怕 目 己 编写 的 代码 与 同事 的 有 冲突 或 者 互相 影响 ? 


(3) 你 的 代码 在 多 次 维护 之 后 ， 是 否 变 得 越 来 越 爱 肿 ， 越 来 越 难 
以 维护 ? 

(4) 当 你 需要 修改 同事 写 的 代码 时 感觉 无 从 下 手 ， 或 者 要 去 问 他 
如 果 改 了 这 里 那里 会 不 会 影响 其 他 代码 ? 























其 实 出 现 上 面 这 些 情况 的 根本 原因 在 于 ，CSS 代 人 码 没有 规范 化 ! 

规范 化 的 CSS 不 仅 利于 团队 合作 ， 而 且 对 后 期 的 维护 以 及 代码 的 重 
用 ， 都 非常 重要 。 在 这 一 章 里 面 ， 我 们 从 以 下 四 个 方面 来 介绍 一 下 关于 
CSS 规 范 的 内 容 。 

(1) 命名 规范 。 


(2) 书写 规范 。 





(3) 注释 规范 。 


(4) CSS reset。 


4.2 ”命名 规范 

不 少 人 包括 那些 使 用 了 CSS 很 长 时 间 的 开发 人 员 ， 面 对 CSS 文 件 的 
命名 或 者 元 素 id 以 及 class 的 命名 都 会 犯愁 或 者 很 随意 地 对 待 。 其 实 ， 一 
个 展 好 的 命名 规范 ， 不 仅 可 以 提高 代码 的 阅读 体验 ， 而 且 这 对 搜索 引擎 
优化 也 是 非常 重要 的 。 

对 于 命名 规范 ， 主 要 有 两 个 方面 : CSS 文 件 命名 、id 和 class 命 名 。 
4.2.1 CSS 文件 命名 


CSS 文 件 命名 及 说 明 如 表 4-1 所 示 。 


表 4-1 CSS 文 件 命名 
E 置 样式 ， 重 置 元 素 默认 样式 
oa | 全 站 公用 ， 定 义 页 面 基 础 样式 
oem | ms 用 于 实现 换 肤 功能 























模块 样式 ， 用 于 模块 的 样式 
母 版 样式 ， 用 于 母 版 页 的 样式 
专栏 样式 ， 用 于 专栏 的 样式 
表单 样式 ， 用 于 表单 的 样式 





























mend.css 补丁 样式 ， 用 于 维护 、 修 改 的 样式 


打印 样式 ， 用 于 打印 的 样式 











reset.css 用 于 去 除 元 素 的 默认 样式 ， 使 得 页 面 在 所 有 浏览 器 中 有 统 
一 的 外 观 。 关 于 重 置 样式 ， 我 们 在 4.5 节 “CSS reset” 中 会 介绍 。 


昌 obal.css 用 于 定义 公共 模 英 样式 以 及 基础 样式 。 御 见 的 公共 模块 包 
括 导航 、 底 部 信息 栏 等 。 基 础 样式 包括 全 局 字体 、 文 字 颜 色 等 。 


那么 最 大 的 疑问 来 了 ! 平常 我 们 都 是 把 重 置 样式 、 导 航 样式 全 都 写 
在 一 个 CSS 文 件 里 面 ， 这 里 为 什么 还 要 搞 那 么 多 个 文件 出 来 呢 ? 再 说 
了 ， 一 个 页 面 引 入 这 么 多 CSS 文 件 ， 会 引发 多 次 HITTP 请 求 ， 页 面 加 载 
速度 岂 不 是 非常 慢 ? 


事实 上 ， 把 样式 文件 划分 为 多 个 文件 ， 这 是 “开发 阶段 ”的 做 法 ! 按 
照 功 能 模块 划分 CSS 文 件 ， 那 是 为 了 方便 在 开 友 阶段 进行 开 肥 和 修改 。 
在 整 站 发 布 的 时 候 ， 我 们 会 使 用 工具 将 多 个 CSS 文 件 压 缩合 并 成 一 个 文 
件 。 也 惑 是 说 ， 开 发 阶段 和 发 布 阶段 是 有 区 别 的 ， 大 家 要 分 清楚 。 




















4.2.2 id 和 class 命 名 


不 少 新 手 朋 友 对 竺 元 素 id 和 class 的 使 用 和 命名 很 随意 ， 似 乎 完全 是 
途 心 情 来 的 。 例 如 这 个 元 素 用 了 id， 那 个 元 素 就 用 用 class 吧 。 其 实 ， 什 
么 时 候 用 id， 什 么 时 候 用 class， 是 很 讲究 的 。 对 于 id 和 class 的 使 用 ， 我 
们 在 HIML 进 阶 部 分 已 经 给 大 家 详细 讲解 过 了 。 


此 外 ， 对 于 元 系 id 和 class 的 命名 ， 其 实 也 是 很 有 讲究 的 。 好 的 命名 
有 很 多 优点 ， 不 仅 方 便 阅 读 、 方 便 维护 ， 而 且 对 搜索 引擎 优化 也 是 相当 
重要 的 。 搜 索引 擎 识别 一 个 页 面 ， 很 大 一 部 分 是 根据 元 素 id 或 class 命 名 
来 判断 。 假 如 一 个 页 面 的 元 素 命 名 很 随意 的 话 ， 搜 索引 擎 小 蜘蛛 很 容易 
迷路 ， 这 样 会 导致 它 以 后 很 少 来 光顾 你 的 网 站 。 


id 和 class 命 名 ， 比 较 常 见 的 有 三 种 方法 。 


(1) 骆驼 峰 命 名 法 ， 例 如 topMain、subLeftMenu 。 





(2) 中 划 线 命名 法 ， 例 如 top-main、sub-left-menu。 
(3) 下划线 命名 法 ， 例 如 top_main、sub_left_ menu。 
在 CSS 中 ， 对 于 元 素 id 和 class 的 命名 ， 我 们 给 出 几 点 建议 。 


(1) 使 用 英文 命名 而 非 中 文 命名。 例如 页 面 头 部 应 该 命名 为 
header， 而 不 是 toubu。 


(2) 尽量 不 缩写 ， 除 非 是 一 看 就 明白 的 单词 ， 例 如 nav。 

(3) 命名 统一 规范 ， 尽 量 不 要 出 现 一 个 用 中 划 线 命名 ， 而 另外 一 
个 用 下 划 线 命名 的 情况 。 虽 然 下 划 线 和 中 划 线 都 可 以 ， 但 是 建议 使 用 中 
划 线 ， 可 参见 各 大 型 网 站 。 


(4) 为 了 避免 class 命 名 的 重复 ， 命 名 时 一 般 取 父 元 素 的 class 名 作 
为 前 级 ， 例 如 : 





<div class="column"> 
<h3 class="column-title"></h3> 


<div class="column-content"></div> 
</div> 





1. 网 页 主体 部 分 命名 


表 4-2 所 示 的 是 页 面 中 常见 部 分 的 命名 规范 建议 。 


表 4-2 ”网 页 主题 部 分 命名 




















wrapper( 一 般 用 于 包 里 整个 页 面 


i SR ERERE 





侧 栏 sidebar 


column 


新 闻 
SE 





登录 login 

















(1) 导航 〈 见 表 4-3) 。 
表 4-3 ”导航 命名 


[CN 


(2) 菜单 〈 见 表 4-4) 。 
表 4-4 “菜单 命名 
































子 菜单 submenu 
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对 于 上 面 这 些 命名 规范 ， 建 议 小 伙伴 们 在 实际 开发 中 多 多 参考 ， 使 
得 目 己 编写 的 代码 更 规范 ， 更 具有 语义 性 和 可 读 性 ， 方 便 后 期 维护 。 


4.3 性 写 规 沁 








在 CSS 中 ， 属 性 的 书写 顺序 也 是 很 有 讲究 的 。 良 好 的 书写 顺序 习 
惯 ， 既 方便 阅读 ， 同 时 也 方便 后 斯 维护 。 Andy Ford 和 Fantasai 这 两 位 都 
人 页 域内 的 专家 ， 他 们 都 各 自 对 CSS 属 性 书写 顺序 提出 过 自己 的 意 

。 表 4-6 所 示 的 是 综合 两 位 专家 的 思想 所 推荐 的 CSS 属 性 书写 顺序 。 


表 4-6 CSS 属 性 书写 顺序 








举 例 











display、position、float、clear 等 


width、height、padding、margin、border、overflow 等 


outs line-height、text-align、text-indent、vertical-align 








color、background-color、opacity、 cursor 等 
其 他 属性 content、list-style、 quotes 等 


这 种 CSS 属 性 书写 顺序 是 按照 样式 功能 的 重要 性 从 上 到 下 排列 的 。 

















这 里 把 影响 元 素 页 面 布局 的 样式 (如 float、margin、padding、height、 
width 等 ) 排 到 前 面 ， 而 把 不 影响 布局 的 样式 〈 如 background、color、 
font 等 ) 排 到 后 面 。 这 种 主 次 分 明 的 排列 方式 ， 极 大 地 提高 了 代码 的 可 
阅读 性 和 可 维护 性 。 





举例 : 


#main 


{ 





/* 影 响 文档 流 属 性 */ 
display:inline-block; 
position:absolute; 
top:0; 

left:0@; 

/* 盒 子 模型 属性 */ 
width:166px ; 
height:166pX; 
border:1px solid gray 
/* 文 本 性 属性 */ 
font-size:15px; 
font-weight:bold; 
text-indent:2em; 

/#* 装 饰 性 属性 */ 
color:White; 
background-color:Red; 
/* 其 他 属性 */ 


cursor:pointer; 




















上 面 CSS 书 写 顺序 是 比较 规范 的 ， 读 起 来 一 目 了 然 ， 后 期 维护 也 很 
方便 。 对 于 这 种 书写 顺序 ， 一 开始 我 们 并 不 适应 。 我 们 应 该 在 实际 开发 
的 过 程 中 感性 地 认 知 ， 并 逐步 规范 目 己 的 书写 顺序 。 


在 这 里 ， 大 家 可 能 就 有 疑问 了 : 在 实际 开发 中 ， 是 不 是 一 定 要 把 影 
啊 文 档 流 的 属性 写 完 了 ， 然 后 才 去 写 盒子 模型 的 属性 ;是 不 是 一 定 要 把 
文本 性 属性 写 完 了 ， 人 然后 才 去 写 装 饰 性 属性 呢 ? 


这 倒 完 全 没 必要 ， 而 且 我 们 也 做 不 到 。 因 为 CSS 中 的 属性 是 随 着 开 
发 的 需要 逐步 添加 的 。 也 就 是 说 对 于 属性 书写 顺序 ， 我 们 只 关心 “书写 
结果 ”， 并 不 关心 “书写 过 程 ”。 我 们 只 需要 保证 最 终 的 CSS 代 码 顺序 符 
合 规范 就 可 以 了 。 因 为 这 样 可 以 方便 我 们 阅读 以 及 维护 。 


举 个 例子 ， 一 开始 我 们 可 能 写 下 以 下 代码 : 
































#main 


{ 





/*#* 盒 子 模 型 属性 */ 
width:166pXx ; 
height:166pX; 
border:1px solid gray 


DJ 


然后 写 痢 写 着 ， 可 能 我 们 会 发 现 需要 添加 定位 属性 ， 这 时 候 就 应 该 
在 盒子 模型 属性 前 面 加 入 如 下 代码 。 


#main 

{ 
/* 影 响 文档 流 属 性 */ 
display:inline-block; 
position:absolute; 
top:0; 
left:0@; 


/* 盒 子 模型 属性 */ 
width:166px ; 
height:166pX; 
border:1px solid gray 





在 实际 开发 中 为 了 更 好 地 规范 CSS 书 写 顺序 ， 我 们 还 得 分 两 个 方面 
来 考虑 ， 普通 代码 和 功能 代码 。 


1. 普通 代码 





对 于 一 般 情况 ， 我 们 应 该 保证 CSS 代 码 的 最 终 顺序 按照 表 4-6 中 的 书 
写 顺 序 。 


2. 功能 代码 








对 于 单行 文本 居中 、 块 元 素 居 中 等 共有 东 一 个 特殊 功能 的 代码 块 ， 
我 们 就 不 应 该 那么 示 板 了。 因为 功能 代码 往往 是 用 多 个 CSS 属 性 来 实现 
的 ， 此 时 如 果 也 按照 表 4-6 的 书写 顺序 来 的 话 ， 这 些 功能 代码 就 会 锐 打 
乱 ， 并 且 难 以 维护 。 因 此 ， 对 于 功能 代码 ， 我 们 应 该 集中 放 在 一 块 。 


举例 : 


#main 
{ 


float:1left; 
width:166px; 

/* 单 行文 本 居中 */ 
height:56px; 
Line-height:56px; 
border:1px solid gray 
font-size:15px; 
color:White; 





对 于 初学 者 来 说 ， 这 些 功能 代码 也 应 该 加 入 注释 ， 以 便 阅 读 时 一 目 
了 了 然 。 


4.4 注释 规范 





在 CSS 中 ， 为 一 些 关 键 代 码 做 一 下 注释 是 非常 必要 的 。 注 释 的 好 处 
很 多 ， 比 如 方便 理解 、 方 便 碍 找 或 方便 项 目 组 里 的 其 他 开 用 人 员 了 解 你 
的 代码 ， 而 且 可 以 方便 以 后 你 对 自己 的 代码 进行 修改 。 


此 外 ， 展 好 的 注释 规范 对 于 可 读 性 也 是 非常 重要 的 。 下 面 从 几 个 方 
面 给 大 家 一 些 关 于 CSS 注 释 规范 方面 的 建议 。 





4.4.1 ”顶部 注释 





项 部 注释 是 文件 的 基本 信息 ， 一 般 包 括 文件 说 明 、 文 件 版 本 (更 
新 ) 、 作 者 以 及 版 权 声明 等 。 


< 给 例 : 


/* 
*@description: 说 明 
*@author :作者 


*@update: 更 新 时 间 ， 如 2616-4-19 18:36 
*/ 





4.4.2 ”模块 注释 
模块 注释 是 各 个 模块 〈 如 导航 、 底 部 信息 栏 等 ) 的 注释 说 明 ， 模 块 
注释 建议 要 说 明 “ 开 始 " 和 “结束 ”以便 一 目 了 然 。 


准 例 : 


/* 导 航 部 分 ， 开 始 */ 


/* 导 航 部 分 ， 结 束 */ 





4.4.3 简单 注释 


简单 注释 一 般 用 于 注释 某 些 关 键 代 码 ， 如 功能 代码 。 简 单 注释 分 为 





单行 注释 和 多 行 注释 这 两 种 。 
单行 注释 如 下 : 














~ 


多 行 注释 如 下 : 











上 面 这些 都 是 一 些 比较 好 的 注释 规范 的 建议 。 那 么 有 人 就 问 了 ， 在 
网 站 发 布 的 时 候 我 们 往往 都 需要 使 用 压缩 工具 对 CSS 文 件 进 行 压缩 。 压 
缩 之 后 这 些 注 释 不 是 去 掉 了 吗 ? 为 什么 我 们 还 要 那么 费心 费力 地 去 注释 


呢 ? 


其 实 这 并 不 下 盾 ， 我 们 做 好 注释 是 为 了 方便 开发 以 及 后 期 的 维护 。 
在 整 站 发 布 的 时 候 ， 我 们 会 使 用 工具 进行 压缩 才 发 布 出 去 。 开 发 阶段 和 
发 布 阶段 是 有 区 别 的， 大 家 要 分 清楚 。 


我 们 都 知道 压缩 工具 会 删除 所 有 的 注释 ， 有 些 时 候 为 了 保留 一 些 版 
权 声 明 的 注释 说 明 ， 可 以 采用 以 下 方式 : 











也 就 是 说 在 注释 内 容 最 前 面 加 上 一 个 “!”， 这 样 压缩 工具 就 不 会 删 
除 这 条 注释 信息 了 。 


此 外 还 需要 特别 注意 一 下 ，CSS 注 释 的 方式 都 是 /注释 内 容 户 ， 而 
不 包括 /注释 内 容 " 这 种 方式 。 不 过 编辑 器 会 给 出 正确 的 提示 ， 这 个 我 


们 也 不 容易 出 错 。 对 于 CSS 工 具 ， 我 们 在 12.4 市 “压缩 工具 ”中 会 详细 介 


绍 。 


4.5 (CSS reset 


4.5.1 什么 是 CSS reset 


我 们 都 知道 ， 在 HTML 中 很 多 元 素 都 有 一 定 的 默认 样式 。 表 4-7 所 
示 ， 列 举 了 一 些 HTML 中 常见 元 素 默 认 样 式 。 


表 4-7 ” HTML 元 素 的 默认 样式 

















有 字体 倾斜 样式 


reset 就 是 “ 重 置 ”的 意思 ，CSS reset 指 的 就 是 重 置 样式 。 所 谓 的 重 置 
样式 ， 最 简单 的 说 法 就 是 ， 去除 元 素 在 浏览 右 的 默认 样式 。 











4.5.2 ”为 什么 要 用 CSS reset 


现在 浏览 器 有 很 多 ， 主 流 的 有 Chrome、Firefox、IE、Safari、Opera 

。 不 同 的 浏览 器 ， 默 认 样式 也 是 不 同 的 。 举 个 例子 ，Ul 元 素 有 缩 进 样 
式 。 在 Firefox 浏 览 器 中 ，Uul 元 系 的 缩 进 是 通过 padding 实 现 的 ， 而 在 正 浏 
览 器 中 ，ul 元 素 的 缩 进 是 通过 margin 来 实现 的 。 再 比如 button 元 素 ， 在 
IE、chrome、EFirefox 等 浏览 器 中 的 默认 样式 也 是 不 同 的 。 图 4-1 为 不 同 
浏览 器 下 的 表单 按钮 。 


chrome: 提交 


Firefox: | 提交 | 


图 4-1 不 同 浏览 器 下 的 表单 按钮 


浏览 器 默认 样式 的 不 同 ， 往 往 给 我 们 的 开发 带 来 很 大 的 麻烦 ， 并 且 
影响 开发 效率 。 为 了 解决 这 个 问题 ， 一 个 比较 好 的 方法 就 是 : 去 除 元 素 
在 浏览 右 的 默认 样式 〈CSS reset) 。 


我 们 可 以 通过 去 除 元 素 在 浏览 器 的 默认 样式 ， 使 得 HTML 元 素 具 有 
相同 的 初始 样式 ， 然 后 再 对 元 素 进 行 统一 定义 ， 就 可 以 让 页 面 在 不 同 的 
浏览 器 中 产生 相同 的 显示 效果 。 














4.5.3 ”如何 使 用 CSS reset 
说 起 去 除 浏 览 器 默认 样式 ， 有 些小 伙伴 可 能 会 想到 以 下 方法 : 


*{padding:6;margin:0;} 


在 实际 开发 中 ， 并 不 建议 使 用 这 个 方法 。 因 为 这 个 方法 性 能 非常 
低 ， 它 把 所 有 元 素 的 padding 和 margin 都 去 掉 了 ， 然 而 像 表格 元 素 〈( 或 者 
input 元 素 ) 的 margin 和 padding 我 们 是 不 希望 去 掉 的 。 此 外 ， 它 只 能 消除 
默认 的 padding 和 margin， 像 由 的 列表 项 符号 、em 的 斜体 、strong 的 加 粗 
等 却 没有 去 除 。 


不 过 ， 在 测试 学 习 的 过 程 中 ， 我 们 可 以 使 用 “* 
{padding:0;margin:0;}”。 如 果 在 实际 开发 过 程 中 ， 我 们 推荐 CSS 专 家 Eric 
Meyer 的 重 置 样式 表 ， 这 是 国内 外 流行 的 重 置 样式 表 。 


以 下 是 Eric Meyer 发 布 的 最 新 版 的 重 置 样式 表 (2011 年 1 月 26 日 发 
布 ) ， 参 考 于 http://meyerweb.com/eric/tools/css/reset/。 





Eric Meyer 的 CSS reset 完 整 代 人 码 如 下 : 


/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 26116126 
License: none (public domain) 
*/ 
html, body, div, span, applet, object, iframe, 
hi, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, 1i, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0@; 
padding: 6; 
border: 90; 
font-size: 168%; 
font: inherit; 
vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after., 
qd:before, q:after { 
content: ©; 
content: none; 
} 
table { 
border-collapse: collapse; 
border-spacing: 6; 





上 面 这 段 代码 是 我 们 推荐 的 CSS reset 代 码 ， 它 可 以 去 除 常见 HTML 
元 素 的 默认 样式 。 这 个 重 置 样式 表 包 括 了 最 新 的 HIML5 元 素 ， 并 且 删 
除了 过 时 的 HTML 元素。 在 实际 开发 中 ， 我 们 建议 大 家 使 用 CSS reset， 
这 样 我 们 束 个 会 被 元 素 的 默认 样式 所 干扰 ， 从 而 随心 所 欲 地 定义 目 己 的 


样式 。 
此 外 对 于 CSS reset， 我 们 特别 需要 注意 以 下 几 点 。 


(1) CSS reset 代 码 必须 在 其 他 CSS 之 前 引入 ， 道 理 很 简单 : 浏览 器 
对 CSS 代 码 是 从 上 到 下 来 解析 的 。 只 有 把 CSS reset 放 在 前 面 ， 才 有 意 
Pe 











(2) Eric Meyer 建 议 此 CSS reset 代 码 是 应 该 根据 个 人 需求 不 同 来 定 
义 ， 例 如 有 的 页 面 不 会 用 到 address、code 元 素 ， 直 接 把 这 两 个 元 素 剔 除 
即 可 。 因 此 ， 我 们 并 不 推荐 大 家 直接 把 这 段 CSS reset 代 码 简 单 地 原样 复 
制 粘贴 到 自己 的 CSS 中 ， 而 是 根据 自己 的 实际 开发 需求 来 定制 ， 正 所 
谓 “ 滥 用 不 如 不 用 ”。 


(3) Eric Meyer 建 议 此 版 本 的 CSS reset 代 码 也 有 很 多 不 足 ， 例 如 
div、1li、code 就 没有 padding 和 margin。 因 此 ， 我 们 应 该 重新 审视 并 修订 
这 段 代码 再 拿 来 用 。 


(4) 目前 优秀 互联 网 企业 的 网 站 使 用 CSS reset 越 来 越 少 ， 国 外 也 
有 些 优秀 的 网 页 设计 师 已 经 开始 表达 目 己 “不 使 用 CSS reset” 的 观点 。 对 
于 真正 的 实战 开发 来 说 ，CSS reset 也 可 以 说 是 可 有 可 无 的 。 因 此 ， 对 于 
是 否 使 用 CSS reset 也 应 该 根据 实际 开发 需求 来 决定 。 





【疑问 】 


为 什么 浏览 器 要 定义 元 素 的 默认 样式 昵 ? 如 果 默 认 样 式 不 存在 ， 沁 
不 是 更 好 ? 这 样 既 可 以 增强 页 面 的 兼容 性 了 ， 又 可 以 减少 使 用 CSS reset 
来 重 置 默认 样式 的 党 琐 。 


其 实 浏览 右 之 所 以 要 存在 默认 样式 ， 目 的 在 于 保证 没有 样式 表 的 页 
面 也 能 够 正常 显示 。 此 外 ，HTML 元 素 的 默认 样式 往往 跟 它 的 语义 挂 
钩 。 我 们 知道 ， 一 个 页 面 在 "CSS 裸奔 "下 有 很 好 的 可 读 性 ， 这 也 是 元 素 
默认 样式 起 的 作用 。 











5.1 CSS 盒子 模型 


在 “CSS 例 于 模型 > 理论 中 ， 页 面 中 的 所 有 元 素 都 可 以 看 成 一 个 盒 
子 ， 并 且 吕 据 着 一 定 的 页 面 空 间 。 


一 个 页 面 由 很 多 这 样 的 盒子 组 成 ， 这 些 盒子 之 间 会 互相 影响 ， 因 此 
掌握 盒子 模型 需要 从 两 个 方面 来 理解 :一 是 理解 单独 一 个 盒子 的 内 部 结 
构 ， 二 是 理解 多 个 盒子 之 间 的 相互 关系 。 


每 个 元 素 都 看 成 一 个 合子， 盒子 模型 是 由 content〈 内 容 ) 、 
padding (内 边 距 ) 、margin〈 外 边 距 ) 和 border (边框 ) 这 四 个 属性 组 
成 的 。 此 外 ， 在 盒子 模型 中 ， 还 有 宽度 width 和 高 上 度 height 两 大 辅助 性 属 
性 。 











记 住 ， 是 所 有 的 元 素 都 可 以 看 成 一 个 盒子 ! 


图 5-1 所 示 为 一 个 CSS 盒 子 模型 的 内 部 结构 。 
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图 5-1 CSS 盒子 模型 
从 上 图 中 我 们 可 以 得 出 盒子 模型 的 属性 如 表 5-1 所 示 。 
表 5-1 CSS 盒 子 模型 四 个 属性 


Gu 本) 元 这 过 








(外 边 距 ) 用 于 定义 页 面 中 元 素 与 元 素 之 间 的 距离 


(内 边 距 ) 用 于 定义 内 容 与 边框 之 间 的 距离 


(内 容 ) 可 以 是 文字 或 图 片 





其 中 ，padding 称 为 “内 边 距 ”?， 也 常常 称 为 “ 补 白 ”。 图 中 的 margin- 
top 指 的 是 顶部 外 边 距 、margin-right 指 的 是 右 部 外 边 距 ， 以 此 类 推 。 


1. 内容 区 


内 容 区 是 CSS 盒 子 模型 的 中 心 ， 它 呈现 了 盒子 的 主要 信息 内 容 ， 这 
些 内 容 可 以 是 文本 、 图 片 等 多 种 类 型 。 内 容 区 是 盒子 模型 必 备 的 组 成 部 
分 ， 其 他 的 三 部 分 都 是 可 选 的 。 


内 容 区 有 三 个 属性 : width、height 和 overflow。 使 用 width 和 height 属 
性 可 以 指定 盒子 内容 区 的 高 度 和 宽度 。 在 这 里 注意 一 反 ，width 和 Peight 
这 两 个 属性 是 针对 内 容 区 而 言 ， 并 不 包括 padding 部 分 。 


当 内 容 信 息 太 多 而 超出 内 容 区 所 占 范 围 时 ， 可 以 使 用 overflow 洲 出 
属性 来 指定 处 理 方法 。 

















2. 内 边 距 


+ 指 的 是 内 容 区 和 边框 之 间 的 空间 ， 可 以 看 做 是 内 容 区 的 背 
景区 域 。 


关于 内 边 距 的 属性 有 五 种 ， 即 padding-top、padding-bottom、 
padding-left、padding-right 以 及 综合 了 以 上 四 个 方向 的 简洁 内 边 距 属性 
padding。 使 用 这 五 种 属性 可 以 指定 内 容 区 域名 方向 边框 之 间 的 距离 。 











3. 边框 
在 CSS 盒 子 模型 中 ， 边 框 跟 我 们 之 前 学 过 的 边框 是 一 样 的 。 


边框 属性 有 border-width、border-style、border-color 以 及 综合 了 三 类 
属性 的 快捷 边框 属性 border。 


其 中 border-width 指 定 边框 的 宽度 ，border-style 指 定 边框 类 型 ， 
border-color 指 定 边 框 的 颜色 。 


“border-width:1px;border-style:solid;border-color:gray;” 等 价 


于 “border:1px solid gray;”。 


4. 外 边 距 











外 边 距 ， 指 的 是 两 个 盒子 之 间 的 距离 ， 它 可 能 是 子 元 素 与 父 元 素 之 
闻 的 距离 ， 也 可 能 是 兄弟 元 素 之 间 的 距离 。 











外 边 距 使 得 元 素 之 间 不 必 紧 凌 地 连接 在 一 起 ， 是 CSS 布 局 的 一 个 重 


要 手段 。 


外 边 距 的 属性 也 有 五 种 ， 即 margin-top、margin-bottom、margin- 
left、margin-right 以 及 综合 了 以 上 四 个 方向 的 简洁 内 边 距 属性 margin。 


同时 ，CSS 人 允许 给 外 边 距 属性 指定 负数 值 ， 当 指定 负 外 边 距 值 时 ， 
整个 盒子 将 同 指定 负 值 的 相反 方 癌 移动 ， 以 此 可 以 产生 盒子 的 重合 效 
朵 。 这 束 是 传说 中 的 “人 负 margin 拉 术 ”， 我 们 将 会 绿叶 学 习 网 的 CSS 进 阶 
教程 中 给 读者 详细 讲解 这 一 个 高 大 上 的 搁 术 喔 。 


内 容 区 、 内 边 距 、 边 框 、 外 边 距 这 几 个 概念 可 能 比较 抽象 ， 建 议 大 
家 打 好 基础 再 来 学 习 本 章 内 容 。 对 于 基础 知识 可 以 参考 本 书 的 姊妹 篇 
《Web 前 端 开发 精品 课 HTML 和 和 CSS 基础 教程 》。 





举例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS 盒 子 模型 </titley> 
<style type="text/css"> 
#main 


{ 


display:inline-block;/* 将 块 元 素 转 换 为 nline- 块 元 素 */ 
border:1px solid #CCCCCC; 
} 
.lvye 
{ 
display:inline-block; /* 将 块 元 素 转换 为 jnline- 块 元 素 */ 
padding:26pX; 
margin:46pX; 
border:1px solid red; 
background-color:#FCE9B8; 


span{border:1px solid blue;background-color:#C5FCDF;} 
</style> 
</head> 
<body> 
<div id="main"> 


<div class="lvye"><span> 绿 叶 学 习 网 </span></div> 
</div> 


</body> 
</html> 





在 浏览 器 预览 效果 如 图 5-2 和 图 5-3 所 示 。 


我 们 把 class 为 lvye 的 div 层 看 做 一 个 盒子 ， 则 浅 蓝 色 部 分 为 “内 容 
区 ”， 浅 红色 部 分 为 “内 边 距 区 ”， 红 色 边 框 与 灰色 边框 之 间 的 空白 为 “外 
边 距 区 ”， 红 色 的 边框 为 该 盒子 的 边框 。 


绿叶 拖 习 网 


图 5-2 ”CSS 盒子 模型 实例 


| margin: 40pX; 
pudding: 20px: 


绿叶 拖 习 网 


图 5-3 CSS 盒子 模 型 实例 分 析 


当然 ， 我 们 也 可 以 把 最 外 层 的 id 为 main 的 div 层 看 做 一 个 盒子 〈 因 为 
所 有 HTML 元 素 都 可 以 看 做 一 个 盒子 来 理解 ) ， 最 外 层 的 id 为 main 的 div 
层 添 加 内 边 距 和 外 边 距 ， 然 后 思考 一 下 该 盒子 的 “内 容 关 外 边 距 关 内 边 
距 * 和 “边框 ”分 别 是 什么 ? 








人 可 以 很 直观 地 理解 CSS 盒 子 模 型 ， 读 者 细 细 
会 一 下 。 
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图 5-4 CSS 盒子 模型 分 析 图 


在 这 里 ， 给 大 家 温习 了 一 下 CSS 盒 子 模 型 的 内 容 ， 对 于 border、 
padding、margin 这 几 个 属性 的 详细 语法 就 不 展开 了 ， 具 体 请 伍 看 本 书 的 
姊妹 篇 《Web 前 端 开发 精品 课 HTML 和 CSS 基 础 教程 》 相 关 章 节 。 在 接 
下 来 的 章节 中 ， 我 们 只 注重 讲解 开发 技巧 以 及 一 些 深 入 的 内 容 。 











5.2 ”深入 border 


对 于 border 属 性 ， 只 有 一 个 方面 值得 介绍 的 ， 那 就 
是 “border:0” 和 “border:none” 的 区 别 。 


“border:0” 与 “border:none” 的 区 别 主 要 体现 在 两 点 : 性 能 差异 和 兼容 
2 
5.2.1 性 能 差异 

1. border:0 


“border:0” 表 示 把 border 定 义 为 0px。 虽然 0px 在 页 面 上 看 不 见 ， 但 是 
浏览 器 依然 会 对 border 进 行 渲染 ， 演 染 之 后 ， 实 际 上 是 一 个 像素 为 “0” 的 
border。 


也 就 是 说 ，“border:0” 需 要 占用 内 存 。 
2. border:none 


“border:none” 表 示 把 border 害 ， I (无 )”， 浏览 器 解 
析 “border:none” 时 并 不 会 作出 泻 染 


也 就 是 说 ，“border:none” 不 需要 占用 内 存 。 
5.2.2 ”兼容 差异 


兼容 性 差异 只 存在 于 IE6 和 下 7 的 <input type=”button2?/> 标 签 以 及 
<button> 标 签 中 ， 其 他 浏览 器 不 存在 兼容 问题 。 


“border:0” 在 所 有 浏览 占 中 的 效果 都 一 样 ， 都 是 把 边框 隐藏 (不 是 
去 掉 ) ， 如 图 5-5 所 示 。 


“border:none” 对 IE6 和 IE7 按 钮 的 边框 无 效 ， 在 其 他 浏览 右 则 会 去 掉 
按钮 的 边框 ， 如 图 5-6 所 示 。 














Input text button text 





图 5-5 “border:0” 的 按钮 效果 











| input text | | button text | 





图 5-6 “border:none” 在 IE6/IE7 中 按钮 的 边框 无 效 


由 于 下 6 和 IE7 已 经 逐渐 被 抛弃 了 ， 因 此 我 们 不 需要 纠 
结 “border:0” 与 “border:none” 的 兼容 问题 。 


在 实际 开发 中 ， 对 于 “border:0” 与 “border:none” 我 们 不 需要 纠结 那么 


多 ， 用 哪个 都 差不多 。 兼 容 方面 就 不 次 了 ， 经 过 测试 ， 两 者 在 性 能 方面 
对 页 面 泻 染 速度 的 差别 并 不 大 。 











5.3 闲 入 padding 


内 边 距 padding， 又 和 常常 称 为 “ 补 白 ”， 它 指 的 是 内 容 区 到 边框 之 则 的 
那 一 部 分 ， 如 图 5-7 所 示 。 


margin-top 
border-top 


Daddin © 


o | 
0 

=- 
CQ. 
fD 

中 
mm 
+ 


3U31-J3pJOg 


U31J-Ui3Jew 


paddir 
border-bottom 


margin-bottom 





width 


图 5-7 _ CSS 盒子 模型 


对 于 padding 这 个 属性 ， 没 多 少 东 西 可 以 探讨 。 不 过 在 实际 开发 
中 ， 关 于 背景 图 片 的 使 用 有 时 会 涉及 padding 的 一 个 小 技巧 。 


像 图 5-8 这 种 效果 ， 我 们 都 是 使 用 “背景 图 片 +padding” 来 实现 的 ， 如 
图 5-9 所 示 ， 分 析 如 下 : 





> 商会 概况 > 商会 章程 
> 组 织 机 构 > 规章 制度 
> 商会 荣誉 > 加 入 商会 


图 5-8 ”背景 图 片 与 padding 案 例 


商会 概况 商会 章程 


1i 127px x 36px| 规章 制度 
商会 荣誉 加 入 商会 


图 5-9 背景 图 片 与 padding 案 例 分 析 


举例 ; 


<“!1DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 
{ 
background-image:url("images/bg.gif"); 
width:127px; 
height:36px; 


line-height:36px; 
font-size:12px; 
color:Red; 


} 
</style> 
</head> 
<body> 
<div> 商 会 状况 </divy> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 5-10 所 示 。 


了 商会 状 见 


图 5-10 ”padding 技巧 实例 


分 析 : 


在 这 里 我 们 可 以 看 到 ， 当 一 et ee 该 元 素 的 文 
字 内 容 会 停留 在 左边 ， 如 果 想 要 达到 预期 效果 ， 可 以 使 用 padding 来 实 
现 ， 修 改 后 的 CSS 代 码 如 下 : 





div 

{ 
background-image:url("images/bg.gif"); 
width:72px; /*127-55=72*/ 
height:36px; 


line-height:38px; 
padding-left:55px; 
font-size:12px; 
color :Red; 





5.4 ”外边 距 登 加 


有 过 开发 经 历 的 小 伙伴 们 可 能 会 碰 过 这 种 情况 : 有 相 邻 的 两 个 块 元 
素 A 和 B， 上 面 的 为 A， ee 其 中 A 定义 了 一 个 margin-bottom，B 
定义 了 一 个 margin-top。 在 浏览 器 预 吃 效 果 中 ， 我 们 会 发 现 A 和 B 之 间 的 
垂直 距离 明显 小 | 加 之 和 。 





举例 ; 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<«style type="text/css"> 
div 


{ 


height:606px; 
line-height:66px; 
text-align:center; 
font-size:38px; 


color:White; 
background-color:Purple; 
} 
#first{margin-bottom:260px;} 
#second{margin-top:36px;} 
</style> 
</head> 
<body> 
<div id="first">A</div> 
<div id="second">B</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 5-11 所 示 。 
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图 5-11 A 和 B 之 间 的 垂直 距离 小 于 两 者 之 和 
分 析 : 


在 这 里 ，A 的 margin-bottom 为 20px，B 的 margin-top 为 30px， 但 是 A 
和 B 之 间 的 间距 并 不 是 50px。 不 知道 原因 所 在 的 小 伙伴 们 还 以 为 浏览 
有 bug。 其 实 ， 这 个 现象 是 由 外 边 距 著 加 所 引起 的 。 





外 边 距 合 加 ， 叉 称 “margin 合 加 ”*， 指 的 是 当 两 个 垂直 外 边 距 相 电 
时 ， 这 两 个 外 边 距 将 会 合并 为 一 个 外 边 距 ， 即 “二 变 一 "。 其 中 ， 车 加 之 
后 的 外 边 距 高 度 等 于 发 生 登 加 之 前 的 两 个 外 边 距 中 的 最 大 值 。 


对 于 外 边 距 鳃 加 ， 我 们 分 为 三 种 情况 来 讨论 : 同 级 元 系 、 父 子 元 素 








5.4.1 ”外边 距 准 加 的 三 种 情况 


1. 同 级 元 素 








当 一 个 元 素 出 现在 另外 一 个 元 素 上 面 的 时 候 ， 第 一 个 元 素 的 下 边 距 
Cmargin-bottom) 将 会 与 第 二 个 元 素 的 上 边 距 (margin-top) 会 发 生 合 
并 ， 如 图 5-12 所 示 。 
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图 5-12” 同 级 元 素 的 外 边 距 闭 加 
2 有 仪 子 元 过 


当 一 个 元 素 包 含 在 男 外 一 个 元 素 中 时 (父子 关系 ) ， 假 如 没有 内 边 
距 padding 或 边框 border 把 外 边 距 分 隅 开 的 话 ， 父 元 素 和 子 元 素 的 相 邻 上 
下 外 边 距 也 会 发 生 合并 ， 如 图 5-13 所 示 。 


合并 之 前 合 





外边 距 合并 
-个 人 | 
| margin-top: 10px | 形成 “人 外 局 本 





| 内 容 区 域 | 





图 5-13 ”父子 元 素 的 外 边 距 闭 加 


当 一 个 空 元 素 有 上 下 外 边 距 时 ， 如 果 没 有 border 或 者 padding， 则 元 
素 的 上 外 边 距 与 下 外 边 距 会 发 生 合 并 。 


空 元 素 ， 指 的 是 没有 子 元 素 或 者 没有 文字 内 容 的 元 素 ， 例 如 


<br>、<hr> 等 。 


如 宁 空 元 么 的 外 边 距 碰 到 另外 一 个 元 素 的 外 边 距 ， 它 们 也 会 发 生 合 
ts 























合并 之 前 合并 之 后 
| | 
| margin-top; 20px 三 一 一 一 一 一 一 | 
| | 外 边 距 合并 | margin-top:20px | 
| _margin- bottom: 20px 本 形成 一 个 外 过 距 — , a 
合并 之 前 合并 之 后 
margin-top: 20px EE 
: 
margin-top: 20px 形成 一 个 外 过 距 





| 

| 所 有 外 过 距 合并 margin-top: 20px | 

| | = 
| 
| margin-bottom :20px | 





图 5-14” 空 元 素 的 外 边 距 铬 加 


0 加 只 有 三 种 情况 ， 同 级 元 素 、 父 子 元 素 和 空 元 素 。 此 外 对 
于 外 边 距 胎 加， 我 们 还 需要 注意 以 下 几 扣 : 


(1) 水 平 外 边 距 永远 不 会 有 车 加 ， 水 平 外 边 距 指 的 是 margin-left 和 


margin-right。 


(2) 垂直 外 边 距 只 会 在 以 上 三 种 情况 下 会 全 加 ， 垂 直 外 边 距 指 的 


是 margin-top 和 margin-bottom。 


(3) 外 边 距 又 加 之 后 的 外 边 距 蜗 上 度 等 于 发 生 苔 加 之 前 的 两 个 外 边 
距 中 的 最 大 值 。 


(4) 外 边 距 闭 加 针对 的 是 block 以 及 inline- 块 元 素 ， 不 包括 inline 元 
素 。 因 为 inline 元 素 的 margin-top 和 margin-bottom 设 置 无 效 。 























5.4.2 ”外 边 距 闭 加 的 意 
下 面 是 一 个 文本 型 页 面 ， 第 一 个 段落 上 面 的 空间 等 于 段落 的 margin- 
top。 如果 没有 外 边 距 车 加 ， 第 一 个 段落 之 后 的 所 有 上 段落 之 间 的 外 边 距 
> 这 样 就 跟 第 一 个 段落 显得 


VT 
都 是 相 邻 的 margin-top 和 margin-bottom 之 和 
段落 之 间 的 margin-top 和 margin-bottom 就 会 









































] 





不 一 致 了 。 
如 果 发 生 外 边 距 登 加 ， 
合并 在 一 起 ， 这 样 就 跟 人 第 一 个 段落 显得 一 致 了 。 
CSS 定 义 外 边 距 合 加 的 初衷 就 是 为 了 更 好 地 对 文章 进行 排版 ， 如 图 
5-15 所 示 。 了 解 这 一 点 ， 对 于 我 们 理解 和 记忆 外 边 距 狼 加 很 有 帮助 
没有 外边 距 合 并 有 外边 距 合 并 
\ | | 
ee .NE 
图 5-15 “外边 距 爱 加 的 意义 
是 惑 。 此 外 在 实 


当然 ， 了 解 外 边 距 老 加 的 原理 ， 能 给 我 们 解决 不 少 疑 
际 开 发 中 ， 给 大 家 一 个 建议 : 最 好 统一 使 用 margin- CO an 
bottom， 不 要 混合 使 用 ， 从 而 降低 出 现 问 题 的 风险 。 当 然 这 在 技术 上 并 


但 却 是 一 个 良好 的 习惯 。 
加 的 原理 比较 复杂 ， 跟 BFC ( 块 级 格式 上 下 文 ) 有 着 密切 





不 是 必需 的 ， 
外 边 距 重 


的 关系 。 这 一 节 我 们 只 是 简单 介绍 了 最 基本 的 东西 ， 对 于 BFC 我 们 在 后 
续 和 节 会 详细 介 


5.5 负 margin 技 术 


在 CSS 中 ，margin 属 性 取 值 可 以 为 正 数 ， 也 可 以 为 负数 。margin 无 
论 取 值 为 正 数 还 是 负数 ， 都 可 以 让 当前 元 素 或 者 周围 元 素 进 行 移动 。 但 
是 margin 为 正 数 和 margin 为 负数 ， 这 两 者 却 有 着 很 大 的 不 同 。 对 于 
margin 为 正 数 的 情况 ， 我 们 不 在 此 展开 ， 因 为 这 种 情况 我 们 已 经 接触 得 
(也 束 是 负 margin ) 
J 相关 技巧 。 








5.5.1 负 margin 简 介 


当 margin 为 负数 的 时 候 ， 对 普通 文档 流 元 素 和 对 浮动 元 素 的 影响 是 
不 一 样 的 ， 如 图 5-16 所 示 。 负 margin 对 普通 文档 流 元 素 的 影响 ， 我 们 分 
两 种 情况 。 


(1) 当 元 素 的 margin-top 或 者 margin-left 为 负数 时 , “当前 元 素 ” 会 
被 拉 回 指定 方向 。 


(2) 当 元 素 的 margin-bottom 或 者 margin-right 为 负数 时 , “后 续 元 
素 ” 会 被 拉 回 指定 方 癌 。 











margin-top:-10pxX; 


margin-left: -10px; margin-right:-10px; 





margin-bottom: -10pxX; 


图 5-16 不 同方 向 的 负 margin 分 析 图 





从 图 5-16 中 我 们 可 以 看 出 ，margin-top 和 margin-left 将 “当前 元 素 ” 拉 
出 ， 然 后 履 盖 “其 他 元 素 ”。margin-bottom 和 margin-right 是 将 “后 续 元 


素 ” 拉 进 ， 然 后 履 盖 “当前 元 素 ”。 
负 margin 对 浮动 元 素 的 影响 ， 跟 负 margin 对 普通 文档 流 元 素 的 影响 


其 实 是 差不多 的 。 唯 一 不 太一 样 的 是 ， 浮 动 元 素 可 以 向 左 也 可 以 向 右 。 
因此 对 于 浮动 元 素 ， 我 们 只 需要 比 普通 文档 流 元 素 多 关注 一 点 ， 那 就 是 


浮动 元 素 的 “流动 的 方 回 ”。 


其 实 ， 对 于 人 负 margin 引 起 的 元 系 移 动 方 辐 我 们 很 容易 起 记 。 不 过 也 
不 用 担心 ， 在 实际 开发 过 程 中 ， 我 们 稍微 测试 一 下 就 很 容易 知道 了 。 














举例 ，margin-top 或 margin-bottom 为 负数 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 
<style type="text/css"> 
#wrapper div 
{ 
width:3606px; 
height:66px; 
line-height:66pX; 
font-size:21px; 
font-weight:bold; 
text-align:center; 
color:White; 


#first{background-color:Red;} 
#second{background-color:Purple;} 
#third{background-color:Blue;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first">1</div> 
<div id="second">2</div> 
<div id="third">3</div> 
</div> 


</body> 
</html> 


在 浏览 器 预览 效果 如 图 5-17 所 示 。 





图 5-17 未 设置 ”margin-top 或 margin-bottom 


分 析 : 


当 我 们 为 第 二 个 div 添 加 “margin-top:-30px;” 时 ， 在 浏览 器 预览 效果 
如 图 5-18 所 示 ， 我 们 可 以 看 到 “当前 元 系 ” (第 二 个 div) 被 拉 癌 上 方 。 


当 我 们 为 第 二 个 div 添 加 “margin-bottom:-30px;” 时 ， 在 浏览 器 预览 交 
果 如 图 5-19 所 示 ， 我 们 可 以 看 到 “后 乡 赤 元 素 "( 第 三 个 div) 被 拉 向 上 方 。 











图 5-18 ”第 二 个 div 设 置 margin-top 为 -30px 





5-19 第 二 个 div 设 置 margin-bottom 为 -20px 





举例 : margin-left 或 margin-right 为 负数 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 

<style type="text/css"> 
/* 去 除 ijnline- 块 元 素 之 间 的 间距 */ 
#wrapper{font-size:0;} 
#wrapper div 


{ 





display:inline-block; 
width:66pX 
height:66px; 
line-height:66pX; 
font-size:21px; 
font-weight:bold; 
text-align:center; 
color:White; 
} 
#first{background-color:Red;} 
#second{background-color:Purple;} 
#third{background-color:Blue;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first">1</div> 
<div id="second">2</div> 
<div id="third">3</div> 
</div> 
</body> 


在 浏览 右 预 览 效 果 如 图 5-20 所 示 。 





图 5-20 ”未 设置 margin-left 或 margin-right 


分 析 : 


当 我 们 为 第 二 个 div 添 加 “margin-left:-30px;” 时 ， 在 浏览 器 预览 效果 
如 图 5-21 所 示 ， 我 们 可 以 看 到 “当前 元 素 ”( 第 二 个 div) 被 拉 问 左 方 。 


当 我 们 为 第 二 个 div 添 加 “margin-right:-30px;” 时 ， 在 浏览 器 预览 效果 
如 图 5-22 所 示 ， 我 们 可 以 看 到 “后 续 元 素 ”( 第 三 个 div) 被 拉 同 左 方 。 





图 5-21 第 二 个 div 设 置 margin-left 为 -30px 


图 5-22 第 二 个 div 设 置 margin-right 为 -30px 
5.5.2” 负 margin 技 巧 
负 margin 的 使 用 很 灵活 ， 常 用 技巧 有 四 个 。 
(1) 图 片 与 文字 对 齐 。 
(2) 自 适 应 两 列 布局 。 





(3) 元 素 垂 直 拓 中 。 
(4) tab 选 项 卡 。 


1. 图 片 与 文字 对 齐 





当 图 厂 与 文字 排 在 一 起 的 时 候 ， 在 底部 水 平方 向 上 往往 都 是 不 对 齐 
的 ， 这 是 因为 图 片 与 文字 默认 是 基线 对 齐 〈vertical-align:baseline) 。 如 
果 想 要 实现 网 片 与 文字 底部 水 平方 向 对 齐 ， 除 了 使 用 "vertical-align:text- 
bottom” 这 个 方法 之 外 ， 还 可 以 使 用 兼容 性 比较 好 的 负 margin 来 实现 。 





举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 


<body> 

<img src="images/baidu.png"” alt=""/> 百 度 LOGO 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 5-23 所 示 。 


, 加 百度 LOG0 








图 5-23 ”图 片 与 文字 在 一 起 的 效果 





分 析 : 








从 图 5-23 中 我 们 可 以 看 出 ， 默 认 情 况 下 图 片 与 文字 在 底部 水 平方 同 
上 是 不 对 齐 的 。 我 们 在 CSS 中 添加 “img{margin:0 3px -3px 0;}” 之 后 ， 在 


浏览 器 预览 效果 如 图 5-24 所 示 。 实 际 上 , “margin{0 3px -3px 0}” 可 以 看 
成 一 条 公式 般 的 东西 ， 大 家 记 住 就 行 。 


-图 百度 L060 : 


人 


图 5-24 图 片 与 文字 对 齐 效果 
2. 自 适 应 两 列 布局 
目 适 应 两 列 布局 ， 指 的 是 在 左右 两 列 中 ， 其 中 有 一 列 的 宽度 为 自 适 


应 ， 劝 外 一 列 览 度 是 固定 的 。 如 宁 使 用 float， 一 般 只 能 实现 固定 的 左右 
两 列 布局 ， 并 不 能 实现 其 中 一 列 为 目 适 应 的 布局 。 





尘 例 ; 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#content ,#sidebar 


float:1left; 
color:white; 

} 

#content 

{ 
width :166% ; 
margin-right:-2060pX; 
background-color:Red; 


} 


#sidebar 


width:260px; 
background-color:Purple; 








} 

/* 防止 浏览 器 可 视 区 域 宽度 不 足 时 发 生 文本 重 基 +/ 
#content p {margin-right:216px;} 

/* 它 是 2886px + 16px，18px 是 他 们 的 间距 */ 








</style> 
</head> 
<body> 








<div id="content"> <p> 这 是 主体 部 分 ， 自 适应 宽度 </p> </div> 
<div id="sidebar"> <p> 这 是 侧 边 栏 部 分 ， 固 定 宽 度 </p> </div> 
</body> 
</html> 








在 浏览 器 预 吃 效果 如 图 5-25 所 示 。 


ocalhost:1080/test/HT ‘ 


全 localhost 








图 5-25” 负 margin 实 现 自 适应 两 列 布局 


分 析 : 





le Ra 
效果 。WordPress 经 典 的 两 栏 自 适应 布局 就 是 使 用 这 种 方法 来 实现 的 。 











3. 元 素 垂 直 居 中 


想 要 实现 块 元 素 的 垂直 居中 一 般 来 说 比较 抹 烦 ， 不 过 有 一 个 经 典 的 
方法 ， 就 是 使 用 position 结 合 负 margin 来 实现 。 具体 做 法 是 : 首先 给 父 元 
素 写 上 “position:relative”， 这 样 做 是 为 了 给 子 元 素 添 
加 “position:absolute” 的 时 候 不 会 被 定位 到 “外 太空 去。 然后 给 子 元 素 添 
加 如 下 属性 : 


position:absolute; 











top:5602%; 
left:562%; 


之 后 再 添加 如 下 属性 : 


margin-top:"height 值 一 半 的 负 值 "; 
margin-left:"width 值 一 半 的 负 值 "。 





position:absolute; 

top:508%; 

left:56%; 
margin-top:"height 值 一 半 的 负 值 "; 
margin-left:"width 值 一 半 的 负 值 "; 














说 明 : 


position 这 种 方法 是 万 能 的 ， 也 就 是 不 仅 可 以 用 于 块 元 素 
(block) ， 还 可 以 用 于 inline 元 素 和 inline- 块 元 素 。 对 于 margin-top 和 
margin-left 为 什么 要 这 样 定 义 ， 大 家 上 自行 画 个 草稿 图 就 能 理解 。 


举例 : 


<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<title></title> 
<style type="text/css"> 
#father 
{ 
position:relative; 
width:266pX; 
height:166pX; 
border:1px dashed gray 
} 
#son 
{ 
position:absolute; 
top:506%; 
left:568%; 
margin-top:-38px; 
margin-left:-56px; 
width:160px; 
height:68px; 
background-color:Red; 
} 
</style> 
</head> 
<body> 


<div id="father"> 
<div id="son"></div> 
</div> 
</body> 
</html> 





在 浏览 右 预 览 效 果 如 图 5-26 所 示 。 























图 5-26” 负 margin 实 现 元 素 垂 直 居 中 


分 析 : 


更 多 关于 元 素 的 垂直 居中 技巧 ， 我 们 在 后 面 的 *13.2 ”垂直 居中 ”一 


布 会 详细 介绍 。 


4. tab 选 项 卡 





tab 选 项 卡 效果 是 一 种 十 分 节省 页 面 空间 的 方式 ， 在 实际 开发 中 经 
常会 用 到 。 像 图 5-27 中 的 选项 卡 ， 关 键 是 使 用 “margin-top:-1px” 来 解决 
选项 卡 下 边框 显示 问题 。 由 于 tab 选 项 卡 涉及 JavaScript 内 容 比 较 多 ， 
此 不 在 此 展开 。 有 兴趣 的 同学 可 以 使 用 调试 工具 (如 Firebug)〉 但 看 一 下 
绿叶 学 习 官 网 首页 的 tab 选 项 卡 ， 可 以 学 到 很 多 东西 。 











| ] 
娱乐 | 经 济 | 科技 | 时 事 | 





图 5-27” 负 margin 实 现 tab 选 项 卡 


5.6 overflow 


W3C 标 准 指 出 ， 通 第 一 个 盒子 的 内 容 是 被 限制 在 盒子 边框 之 内 的 。 
但 是 有 时 也 会 产生 洲 出 ， 也 就 是 部 分 或 者 全 部 内 容 跑 到 盒子 边框 之 外 。 


在 CSS 中 ， 我 们 可 以 使 用 overflow 属 性 来 定义 当 内 容 洲 出 元 素 边框 
时 发 生 的 事情 。 


语法 : 








overflow: 属 性 值 ; 


说 明 : 


overflow 属 性 取 值 如 表 5-2 所 示 。 


表 5-2 ”overflow 属 性 取 值 














， 若 内 容 溢出 ， 则 洪 昌 





S$ LH 
L 

















对 于 overflow 属 性 ， 最 常见 的 三 个 用 途 如 下 。 
(1) 使 用 “overflow:scrol” 显 示 湾 动 条 。 
(2) 使 用 “overflow:hidden” 来 隐藏 内 容 ， 以 免 影响 布局 。 
(3) 使 用 “overflow:hidden” 来 清除 浮动 。 
“overflow:hidden” 会 使 得 超出 元 素 的 部 分 目 动 隐藏 ， 这 样 处 理 不 好 
的 一 点 就 是 这 部 分 的 内 容 显 示 不 完全 ， 比 如 图 片 只 显示 了 一 部 分 。 不 
过 “overflow:hidden” 使 得 内 容 超 出 时 不 会 影响 页 面 整体 布局 ， 这 是 它 的 
好 处 o 


举例 : 














<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#content 


width:260px; 


height:166pX; 
border:1px solid gray 


} 
</style> 
</head> 
<body> 
<div id="content"> 水 陆 草 木 之 花 ， 可 爱 者 甚 著 。 晋 陶渊明 独 爱 菊 。 自 李 唐 ; 
</body> 
</html> 

















在 浏览 器 预览 效果 如 图 5-28 所 示 。 


r 一 ~- 一------------------------------- 一 -1 


的 

,' 蘑 。 晋 陶渊明 独 爱 菊 。 自 李 
, 唐 来 ， 世 人 其 爱 牡丹 。 巴 独 
' 苦 莲 之 出 淤泥 而 不 染 ， 梁 清 
涟 而 不 妹 ， 中 通 外 直 ， 不 营 
, 个 核 ， 香 远 蔓 清 ， 亭 亭 净 

' 巅 ， 可 远 观 而 不 可 迈 玩 盐 。 

: 学 谓 菊 ， 花 之 隐逸 者 也 ; 上 
.有 旦 ， 花 之 富贵 者 也 ， 莲 ， 


之 看 子 者 也 。 乱 | 岳之 基 ，， 
陶 后 鳝 有 闻 ， 莲 之 爱 ， 同 子 
过 何人? 牡丹 之 爱 ， 宜 从 














图 5-28 ”overflow 为 默认 值 的 效果 
分 析 : 


默认 情况 下 ，div 的 overflow 属 性 值 为 visible， 当 我 们 在 CSS 中 为 div 
添加 “overflow:hidden” 后 ， 在 浏览 句 预 览 效 果 如 图 5-29 所 示 。 


BL rt 


Ee 可 爱 者 其 
晋 陶 澳 明 独 爱 菊 。 自 李 
, 唐 来 ， 世人 其 爱 牡丹 。 闻 独 
' 散 莲 之 出 注 泥 而 不 染 ， 浴 清 
全， 中 通 外 直 ， 不 营 
:个 ， 远 蔓 清 ， 亭 亭 兆 
入 可 远 观 而 不 可 欧 玩 现 。 
椰 谓 菊 ， 花 之 隐 人 逸 者 也 ， 特 
的 芒 之 富 中 者 也) 涟 ， 六 


[A 














图 5-29 ”overflow 为 hidden 的 效果 


当 我 们 在 CSS 中 为 div 添 加 “overflow:scrol” 后 ， 在 浏览 器 预览 效果 如 
图 5-30 所 示 。 


. 汇 陆 草木 之 论 ， 可 受洗 世 
尽 。 晋 陶渊明 独 爱 菊 。 自 
. 李 唐 来 ， 世 人 甚 爱 牡丹 。 
. 耶 独 爱 鞍 之 出 淤泥 而 不 

. 染 ， 湿 清 涟 而 不 妖 ， 中 通 
外 直 ， 个 到 不 核 ， 竺 远 基 
, 清 ， 亭 亭 兆 植 ， 可 计 观 而 
人 不 可 诸 玩 天。 子 谓 菊 ， 花 


图 5-30 ”overflow 为 scroll 的 效果 
举例 : 


“<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 
{ 
width:268px; 
border: 1px solid black; 
} 


#first,#second 


{ 
width:86px; 


height:46px; 
border:1px solid red; 


} 
#first{float:left;} 


#second{float:right;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first"></div> 
<div id="second"></div> 
</div> 
</body> 
</html> 





而 
未 
划 
过 
em 


效果 如 图 5-31 所 示 。 


| 


图 5-31 浮动 引起 的 父 元 素 高 度 塌陷 
NS 
A 


当 我 们 为 id 为 wrapper 的 div 元 素 添 加 “overflow:hidden”* 之 后 ， 在 浏览 
器 预览 效果 如 图 5-32 所 示 。 从 中 可 以 看 出 ， 浮 动 已 经 被 清除 了 。 


图 5-32 ”overflow:hidden 清 除 浮 动 


使 用 clear 属 性 来 清除 浮动 的 缺点 是 增加 一 个 多 余 的 标签 ， 而 使 
用 “overflow:hidden” 清 除 浮动 则 不 需要 。 不 过 “overflow:hidden”* 是 一 个 小 
炸弹 ， 它 会 将 超出 父 元 素 部 分 的 内 容 隐 藏 ， 有 时 候 这 并 不 是 我 们 预期 想 
要 的 效果 。 











第 6 半 ”display 属性 


6.1 块 元 素 和 行内 元 素 


在 接触 display 属 性 之 前 ， 我 们 先 来 回顾 一 下 块 元 系 和 行内 元 素 的 基 





在 HTML 的 学 习 中 我 们 可 能 发 现 ， 在 浏览 器 的 显示 效果 中 ， 有 些 元 
素 是 独占 一 行 的 ， 别 的 元 素 不 能 跟 这 个 元 素 位 于 同一 行 ， 如 h1~h6、 
p、div 等 ; 而 有 些 元 素 可 以 跟 其 他 元 系 位 于 同一 行 ， 如 strong、em、 uu 
符 
于 o 




















HTML 元 素 根 据 表 现形 式 ， 和 常见 的 可 以 分 为 两 类 。 

(1) 块 元素 (block) 。 

(2) 行内 元 素 (inline) 。 

block 和 inline 是 最 和 常见 的 两 种 形式 ， 当 然 HTML 元 素 类 型 除了 这 两 
种 ， 还 有 inline-block、table-cell 等 。 这 一 节 我 们 先 重 点 学 习 block 和 和 inline 
这 两 个 元 素 类 型 。 
6.1.1 块 元 素 

块 元 素 在 浏览 喜 默 认 显 示 状 态 下 将 占据 整 行 ， 排 斥 其 他 元 素 与 其 位 


于 同一 行 。 块 元 素 一 般 为 矩形 ， 可 以 容纳 行 元 素 和 其 他 的 块 元 素 。 第 见 
的 块 元 素 见 表 6-1。 








表 6-1 常见 块 元 素 


块 元 素 说 明 


h1~h6 1 到 6 级 标题 





段落 ， 会 自动 在 其 前 后 创建 一 些 空白 


一 


表 中 只 是 列 出 了 HTML 入 门 第 见 的 块 元 系 ， 并 不 是 全 部 。 
块 元 素 具 有 如 下 特点 。 


人 
元 系 。 


(2) 块 元 素 内 部 可 以 容纳 其 他 块 元 素 或 行 元 素 。 
(3) 可 以 定义 高 度 (height) ， 也 可 以 定义 宽度 (width) 。 
(4) 可 以 定义 四 个 方 回 的 margin 属 性 。 

















举例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title> 块 元 素 和 行内 元 素 </title> 


</head> 
<body> 
<div> 
<h3> 绿 叶 学 习 网 </h3> 
<p> 让 这 里 的 一 切 成 为 衬托 你 成 功 的 绿叶 </p> 

















<strong> 绿 叶 学 习 网 </strong><em> 让 这 里 的 一 切 成 为 衬托 你 成 功 的 绿叶 </em> 
</div> 
</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 6-1 所 示 。 


绿叶 学 习 网 
让 这 里 的 一 切 成 为 衬托 你 成 功 的 绿叶 
绿叶 学 习 网 让 过 时 的 一 切 丰 为 时 向 甸 肛 大 绩 中 


图 6-1 块 元 素 和 行内 元 素 


分 析 : 


我 们 为 每 一 个 元 素 加 入 虚线 框 来 分 析 它 们 的 结构 ， 如 图 6-2 所 示 。 





strong> 是 行内 元 率 


图 6-2 抉 元 素 和 行内 元 素 分 析 图 
大 家 很 容易 看 到 以 下 特点。 


(1) h3 和 p 是 块 元 素 ， 它 们 都 是 独占 一 行 的 ， 并 且 排 斥 任何 元 素 
(包括 块 元 素 和 行内 元 素 ) 跟 它 们 位 于 同一 行 ， 而 strong 和 em 是 行内 元 
素 ， 相 邻 两 个 行内 元 素 是 可 以 位 于 同一 行 的 。 


(2) h3、p、strong 和 em 这 几 个 元 素 是 位 于 div 元 素 内 部 的 ， 也 束 是 
块 元 素 内 部 可 以 容纳 其 他 块 元 系 或 行 元 素 。 























6.1.2 行内 元 素 


行内 元 素 与 块 元 素 恰 恰 相 反 。 行 内 元 素 默认 显示 状态 可 以 与 其 他 行 
内 元 素 共 存在 同一 行 。 和 贡 见 的 行内 元 素 见 表 6-2。 


表 6-2 常见 行内 元 素 














斜体 强调 











行内 元 素 具 有 如 下 特点 。 
(1) 可 以 与 其 他 行内 元 素 位 于 同一 行 。 


(2) 行内 内 部 可 以 容纳 其 他 行内 元 素 ， 但 不 可 以 容纳 块 元 素 ， 不 
然 会 出 现 无 法 预知 的 效果 。 








(3) 无 法 定义 高 度 (height) ， 也 无 法 定义 宽度 (width) 。 
(4) 可 以 定义 margin-left 和 margin-right， 无 法 定义 margin-top 和 


margin-bottom 。 


对 于 行内 元 素 的 理解 ， 我 们 重新 回去 查看 块 元 系 中 的 实例 。 





6.2 _ display 简介 


从 上 一 节 我 们 知道 ， 除 了 block 和 inline，HTML 元 素 还 有 inline- 


block、table、table-cell 等 类 型 。 如 果 我 们 想 要 将 元 素 从 一 个 类 型 转换 为 
另外 一 个 类 型 ， 怎么 办 呢 ? 





在 CSS 中 ， 我 们 可 以 使 用 display 属 性 来 改变 元 素 的 类 型 。 
和 


display: 属 性 值 ; 





说 明 : 


display 属 性 取 值 如 表 6-3 所 示 。 





表 6-3 display 属 性 取 值 


inline-block 行内 块 元 素 
人 





table-row 以 表格 行 形式 显示 ， 类 似 于 tr 元 素 


table-cell 以 表格 单元 格 形式 显示 ， 类 似 于 td 元 素 





除了 上 表 这 些 ，display 还 有 list-item、run-in、compact 等 属性 值 。 不 
过 其 他 属性 值 我 们 极 少 用 到 ， 不 需要 去 研究 。 我 们 只 需要 认真 掌握 上 表 
中 这 几 个 ， 就 可 以 走 得 很 远 了 。 
6.2.1 块 元 素 

芯 元 素 ， 指 的 是 均 元 素 。 志 元素 一 般 具 有 以 下 几 个 特 操 。 

(1) 独占 一 行 ， 排 斥 其 他 元 素 跟 其 位 于 同一 行 ， 包 括 块 元 素 和 行 


内 元 素 。 
(2) 块 元 素 内 部 可 以 容纳 其 他 块 元 素 或 行 元 素 。 
(3) 可 以 定义 宽度 (width) ， 也 可 以 定义 高 度 (height) 。 
(4) 可 以 定义 四 个 方向 的 margin。 








6.2.2 _ inline 元 素 
inline 元 素 ， 指 的 是 行内 元 素 。 行 内 元 素 一 般 具 有 以 下 几 个 特点 。 
(1) 可 以 与 其 他 行内 元 素 位 于 同一 行 。 


(2) 行内 内 部 可 以 容纳 其 他 行内 元 素 ， 但 不 可 以 容纳 块 元 素 ， 不 
然 会 出 现 无 法 预知 的 效果 。 


(3) 无 法 定义 高 度 (height) ， 也 无 法 定义 宽度 (width) 。 











(4) 可 以 定义 margin-left 和 margin-right， 无 法 定义 margin-top 和 
margin-bottom 。 


6.2.3 inline-block 元 系 


在 CSS 中 ， 我 们 可 以 使 用 “display:inline-block” 来 将 元 素 转换 为 行内 
块 元 素 。 行 内 块 元 素 具 有 以 下 两 个 特点 。 


(1) 可 以 定义 width 和 height。 
(2) 可 以 与 其 他 行内 元 素 位 于 同一 行 。 
也 就 是 说 inline-block 元 素 既 具备 块 元素 的 特点 ， 也 具备 行内 元 素 的 


特点 。 在 HTML 中 ， 常见 的 inline-block 元 素 有 两 个 : img 元 素 和 input 元 
素 。 对 于 这 两 个 inline-block 元 素 ， 我 们 一 定 要 记 住 。 








2 


< IlDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
span 
{ 
display:inline-block; 
width:606px; 
height:166pX; 


background-color:red; 


} 
</style> 
</head> 
<body> 
<span></span> 
<span></span> 
<span></span> 
</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 6-3 所 示 。 





图 6-3 display:inline-block 实 例 


分 析 : 








在 实际 开发 中 ， 我 们 可 能 经 党 需要 为 span 等 行内 元 素 定 义 一 定 的 
width 和 height， 此 时 应 该 考虑 到 “display:inline-block;”。 此 外 ， 细 心 的 小 
伙伴 会 发 现 ， 怎 么 inline-block 元 素 之 间 还 有 间距 呢 ? 对 于 这 个 问题 ， 我 
们 在 后 面 “去 除 inline-block 元 素 间 距 ” 一 节 会 给 大 家 详细 介绍 。 


有 些 新 手 很 容易 态 记 inline-block 类 型 的 特点 。 我 们 都 知道 img 就 是 
inline-block 类 型 元 素 ， 它 可 以 定义 width 和 height， 还 可 以 与 其 他 行内 元 
素 〈 如 span) 位 于 同一 行 。 如 果 我 们 不 记得 inline-block 类 型 是 怎样 的 ， 
想 一 下 img 元 素 就 知道 了 。 


此 外 对 于 块 元 素 ，IE6 和 IE7 不 能 识别 “display:inline-block”， 加 不 
加 “display:inline-block” 对 它们 完全 没有 任何 影响 。 解 决 方法 是 : 在 IE6 
和 IE7 中 用 “display:inline;zoom:1;” 来 代 蔡 “display:inline-block;”。 对 于 行 
内 元 素 ， 比 如 a、span 等 ，display:inline-block 不 存在 兼容 问题 ， 所 有 浏 
览 器 都 可 以 识别 ， 可 以 正常 使 用 。 当 然 下 6 和 下 7 也 逐渐 淡出 历史 舞台 
了 ， 这 些 了 解 一 下 即 可 。 


这 一 节 ， 我 们 把 display 属 性 常见 的 三 个 属性 block、inline 以 及 inline- 
block 放 在 一 起 介绍 ， 方 便 对 比 理解 记忆 。 对 于 其 他 属性 ， 我 们 接 下 来 


一 一 介绍 。 











6.3 display:none 


6.3.1 display:none 人 简介 

在 CSS 中 ， 我 们 可 以 使 用 “display:none” 来 隐藏 元 
素 。“display:none” 用 得 很 多 ， 如 二 级 导航 、tab 选 项 卡 等 地 方 都 用 到 。 
不 过 一 般 情 况 下 , “display:none” 都 是 配合 JavaScript 来 动态 隐藏 元 素 的 。 


对 于 “display:none”， 我 们 需要 注意 以 下 两 点 。 





(1)“display:none” 一 般 用 于 JavaScript 动 态 隐藏 元 素 ， 被 隐藏 的 元 
素 不 占据 原来 的 位 置 空间 。 


(2)“display:none” 不 推荐 用 来 隐藏 一 些 对 SEO 关键 的 部 分 。 因 为 
对 于 搜索 引擎 来 说 ， 它 会 直接 忽略 “display:none” 隐 藏 的 内 容 ， 不 
把 “display:none” 隐 藏 的 内 容 加 入 权重 考虑 。 


对 于 第 二 上 点， 我 们 在 “7.2 ”深入 text-indent” 一 节 会 给 大 家 详细 介 





绍 。 


举例 : 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 


{ 


display:inline-block; 
width:66px; 
height:68px; 
line-height:66px; 
border:1px solid red; 
font-size:36px; 


text-align:center; 
} 
</style> 
</head> 
<body> 
<div id="first">A</div> 
<div id="second">B</div> 
<div id="third">C</div> 
</body> 
</html> 





在 浏览 器 预 钨 效果 如 图 6-4 所 示 。 
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图 6-4 ”第 2 个 div 未 设置 “display:none” 


分 析 : 


当 我 们 给 第 2 个 div 添 加 “display:none;” 属 性 后 ， 在 浏览 器 预览 效果 如 
图 6-5 所 示 。 


Fr-------------------------]1 
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图 6-5 ”第 2 个 div 设 置 “display:none” 


我 们 会 发 现 第 二 个 div 元 素 隐 藏 了 ， 并 且 被 隐藏 的 元 素 不 再 占据 原 
来 位 置 的 空间 。 





6.3.2 “display:none” 和 “visibility:hidden” 的 区 别 
在 CSS 中 ， 如 果 想 要 隐藏 某 一 个 元 素 ， 我 们 可 以 使 








用 “display:none” 或 者 “visibility:hidden” 来 实现 。 但 是 这 两 者 也 有 本 质 上 
的 区 别 。 


(1)“display:none” 的 元 素 被 隐藏 之 后 ， 不 占据 原来 的 位 置 。 也 就 
是 说 彻底 地 消失 了 ， 看 不 见 也 摸 不 着 。 


(2)“visibility:hidden” 的 元 素 被 隐藏 之 后 ， 依 然 占 据 原 来 的 位 置 。 
也 就 是 说 并 没有 彻底 消失 ， 看 不 见 但 摸 得 着 。 














举例 ; 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<title></title> 
<style type="text/css"> 
#father 
{ 
display:inline-block; 
border:1px solid silver; 
padding:16pX; 
#first,#second 
{ 
display:inline-block; 
width:66pX; 
height :66pX; 
line-height:66pX; 
font-size:36px; 
text-align:center; 
Color :White 
background-color:Red; 
} 
</style> 
</head> 
<body> 


<div id="father"> 
<div id="first">A</div> 
<div id="second">B</div> 
</div> 
</body> 


</html> 





在 浏览 器 预 吃 效果 如 图 6-6 所 示 。 


加 加 


图 6-6 ”A 未 设置 “display:none” 和 和 “visibility:hidden” 








分 析 : 


当 我 们 为 id 为 first 的 div 元 素 添 加 “display:none” 后 ， 在 浏览 器 预览 认 


果 如 图 6-7 所 示 。 


图 6-7 A 设置 “display:none” 


当 我 们 为 id 为 first 的 div 元 素 添加 “visibility:hidden” 后 ， 在 浏览 器 预览 
效果 如 图 6-8 所 示 。 








图 6-8 ”A 设置 “visibility:hidden” 
从 上 面 我 们 可 以 看 出 ，“display:none” 或 者 “visibility:hidden” 都 可 以 


隐藏 元 素 ， 不 过 使 用 “display:none” 的 元 素 被 隐藏 之 后 不 会 占据 原来 的 位 
置 ， 而 使 用 "visibility:hidden” 的 元 素 被 隐藏 之 后 会 占据 原来 的 位 置 。 














6.4 display:table-cell 

在 CSS 中 ，“display:table-cell” 可 以 让 元 素 以 表格 单元 格 的 形式 呈 
现 。 也 就 是 说 ，table-cell 类 型 的 元 素 具 备 td 元 素 的 特点 。 

目前 下 8+ 以 及 其 他 现代 浏览 右 都 文 持 此 属性 ， 不 过 在 IE6/IE7 中 并 不 
文 持 。 考 虑 到 IE6/IE7 使 用 率 越 来 越 低 的 情况 ， 我 们 还 是 果断 使 
用 “display:table-cell* 这 一 布局 神器 。 

“display:table-cel" 非 常 强大 ， 可 以 实现 以 下 三 种 功能 。 

(1) 图 片 垂直 居中 于 元 素 。 

(2) 等 高 布局 。 

(3) 上 自动 平均 划分 元 素 ， 并 且 在 一 行 显示 。 
6.4.1 图 片 垂 直 居 中 于 元 素 


在 CSS 中 ， 我 们 可 以 使 用 “display:table-cell”* 和 “vertical- 
align:center" 来 实现 大 小 不 固定 的 图 片 的 垂直 居中 效果 。 











语法 : 


父 元 素 

{ 
display:table-cell; 
vertical-align:center; 





子 元 素 {vertical-align:center;} 


举例 : 


<“!DOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 


{ 


display:table-cell; 
width:156pX; 
height:158px; 
border:1px solid gray; 
vertical-align:middle; 
text-align:center; 
} 
img{vertical-align:middle;} 
div+div{border-left:none;} 
</style> 
</head> 
<body> 
<div><img src="images/haizeil.png" alt=""/></div> 
<div><img src="images/haizei2.png" alt=""/></div> 
<div><img src="images/haizei3.png" alt=""/></div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 6-9 所 示 。 




















图 6-9 “display:table-cell”* 实 现 图 片 垂直 居中 于 元 素 


图 片 的 水 平 居中 可 以 使 用 “text-align:center” 来 实现 ， 而 图 片 的 垂直 


居中 效果 可 以 使 用 “display:table-cellj” 和 ”vertical-align:center” 配 合 来 实 
现 。 图 片 的 水 平 居 中 和 垂直 居中 我 们 在 实际 开发 中 也 经 各 使 用 ， 例 如 绿 
叶 学 习 网 下 面 图 片 列 表 效 果 就 是 使 用 以 上 方法 来 实现 的 如 图 6-10 所 示 。 











图 6-10 绿叶 学 习 网 图 片 列表 效果 





6.4.2 ”等 高 布局 


我 们 知道 ， 同一 行 的 单元 格 td 元 素 高 度 是 相等 的 。 因此 ， table-cell 
元 素 也 具备 这 个 特点 。 根 据 这 个 特点 ， 我 们 可 以 实现 等 高 布局 效果 。 





举例 : 





< lIDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper{display:table-row;} 
#img-box 
{ 
display:table-cell; 
vertical-align:middle; /* 垂 直 居 中 */ 
text-align:center; /* 水 平 居 中 */ 
width:156px; 
border:1px solid red; 








} 
#text-box 


{ 
display:table-cell; 


width:266pX; 
border:1px solid red; 
border-left:none; 
padding:16pX; 
} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="img-box"> 
<img src="images/haizeil.png" alt=""/> 
</div> 
<div id="text-box"> 
<span>《ONE PIECE》“〔 海 贼 王 、 航 海王 ) 简称 "0P"， 是 日 本 漫画 家 尾 田 琳 
</div> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 几 6-11 所 示 。 


OME PIECE > i 航 
海王 ) 简称 “0P” 日 本 
温 贡 家 必 国 荣 王 部 作 首 后 水 
年 漫 男 作 品 。 在 入 周 刊 少 年 
Jump》1997 年 34 号 开始 连 





彼 大 次 雪 型 慎 了 的 直 事 。 


图 6-11 “display:table-cellj” 实 现 等 高 布局 
PA 
分 析 : 


在 这 个 例子 中 ， 左 右 两 个 盒子 我 们 都 没有 加 上 高 度 ， 而 是 由 盒子 和 内 
容 撑 开 。 但 是 我 们 会 发 现 一 个 很 有 趣 的 现象 : 左右 两 个 倪 子 高 度 相 等 ， 
并 且 高 度 由 两 者 高 度 最 大 值 决 定 。 这 吏 是 目 适 应 的 等 高 布局 。 











小 伙伴 们 可 能 会 问 ， 这 种 目 适 应 的 等 高 布局 有 什么 用 呢 ? 像 下 面 好 
友 动 态 页 中 的 两 栏 布 局 中 就 可 以 用 到 这 种 目 适 应 等 高 布局 如 图 6-12 所 
外。 








四 的 日 子 nar 
站 以 为 自己 是 一 个 人 ,看 来 自己 一 直 不 
笑 - 串 - 浏 点 
不 是 一 个 人 是 什么 ? 是 鬼 19? 人 
~ 你 具体 地 址 是 在 哪 喇 ? 私信 发 痊 技 09 者 ) 
2 


图 6-12 好友 列 表 中 的 等 高 布局 


上 面 这 种 布局 是 两 栏 的 ， 左 栏 只 有 一 个 头像 ， 右 栏 是 内 容 。 有 些 同 
学 可 能 会 为 左右 两 栏 定 义 相同 的 高 度 来 实现 。 但 是 我 们 都 知 着 好 友 动 态 
右 栏 的 内 容 多 少 往往 都 是 不 确定 的 ， 如 果 定 义 固 定 高 度 的 话 ， 和 内 容 超出 
了 高 度 怎 么 办 ? 这 个 时 候 使 用 上 面 介绍 的 等 高 的 目 适 应 布局 就 可 以 完美 
解决 了 。 在 自 适 应 的 等 高 布局 中 ， 左 右 两 栏 都 不 定义 高 度 ， 而 是 由 内 容 
持 振 。 


6.4.3 ”自动 平均 划分 元 素 


如 果 我 们 想 要 使 用 来 实现 下 面 这 种 布局 ， 一 般 都 会 用 float 来 实 
现 ， 并 且 还 得 精准 计算 每 一 个 i 的 宽度 。 但 是 如 果 给 每 个 li 元 素 都 定 
义 “display:table-cell*”， 我 们 束 不 用 显得 如 此 麻烦 。 而 且 会 自动 平均 划分 
元 素 ， 并 在 一 行 显示 如 图 6-13 所 示 。 


























图 6-13 ”宽度 相等 的 元 素 


语法 : 


父 元 素 {display:table}; 


子 元 素 {display:table-cell;} 





说 明 : 


当 父 元 素 定 义 “display:table” 而 子 元 素 定 义 “display:table-cell” 时 ， 如 
果 给 父 元 素 一 定 的 宽度 ， 父 元 素 宽度 就 会 根据 子 元 素 的 个 数 进行 目 动 平 
均 划 分 。 


举例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 
<style type="text/css"> 
*{padding:6;margin:0;} 


ul 

{ 
list-style-type:none; 
display:table; 
width:366pX 

} 

] 

{ 
display: table-cell; 
height:606px; 
line-height:66px; 
text-align:center; 
Color :White 

} 


ul li:nth-child(1){background-color:Red;} 
ul li:nth-child(2){background-color:Orange;} 


ul li:nth-child(3){background-color:Blue;} 
ul li:nth-child(4){background-color:silver;} 
ul li:nth-child(5){background-color:Purple;} 
</style> 
</head> 
<body> 
<U]> 
<1i>1</1i> 
<1i>2</1i> 
<1i>3</1i> 
<1i>4</1i> 
<1i>5</1i> 
</ul> 
</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 6-14 所 示 。 





图 6-14 “display:table-cell” 自 动 平 均 划分 元 素 


当 我 们 将 由 宽度 改 为 400px 时 ， 在 浏览 器 预览 效果 如 图 6-15 所 示 。 


I 


图 6-15 ”宽度 改 为 400px 时 效果 


从 上 面 我 们 可 以 看 到 ，ul 元 素 宽 度 目 动 根据 上 i 元 素 个 数 进 行 平均 划 
分 ， 并 不 需要 我 们 指定 每 一 个 li 元 素 的 宽度 。 





6.5 ”去除 inline-block 元 素 间 距 


我 们 先 来 看 一 个 例子 : 


<“!DOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
*{padding:0;margin:0;} 
ul{list-style-type:none; } 
1i 
{ 


display:inline-block; 
width:66pX; 
height:68px; 
line-height:66px; 
font-size:36pXj 


text-align:center; 
color:White; 
background-color:Purple; 
} 
</style> 
</head> 
<body> 
<U1> 
<1i>A</1i> 
<1i>B</1i> 
<1i>C</1i> 
</ul> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 6-16 所 示 。 


1------------------------------------1 


图 6-16 ”inline- 块 元 素 的 间距 








在 图 中 我 们 可 以 看 到 inline-block 元 素 之 间 是 有 间距 的 。 在 实际 开发 
中 ， 这 种 间距 有 时 会 对 我 们 的 布局 产生 影响 。 大 多 数 时 候 为 了 不 影 啊 布 
局 ， 我 们 需要 去 除 inline-block 元 素 的 间距 。 


在 CSS 中 ， 我 们 可 以 使 用 “font-size:0” 来 去 除 inline-block 元 素 的 间 





距 。 
语法 : 
说 明 : 
“font-size:0” 是 在 inline-block 元 素 的 父 元 素 添 加 的 。 


举例 : 





< IDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
*{padding:06;margin:0;} 
ul{list-style-type:none; font-size:0;} 
1i 
{ 
display:inline-block; 
width:66pX; 
height:66pX; 
line-height:66px; 
font-size:308px; 
text-align:center; 
Color :White 


background-color:Purple; 
} 
</style> 
</head> 
<body> 
<Ul> 
<1i>A</1i> 
<1i>B</1i> 
<l1i>C</1i> 
</U]> 
</body> 
</html> 





图 6-17 “font-size:0” 去 除 inline- 块 元 素 间距 


举例 : 


<“!DOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 


<body> 
<img src="images/haizeil.png" alt=""/> 
<img src="images/haizeil.png" alt=""/> 
<img src="images/haizeil.png" alt=""/> 

</body> 

</html> 





在 浏览 器 预览 效果 如 图 6-18 所 示 。 








图 6-18 ”图 片 之 间 的 间距 


当 我 们 在 CSS 中 添加 “body{font-size:0}” 后 ， 在 浏览 器 预览 效果 如 图 
6-19 所 示 。 





图 6-19 “font-size:0” 去 除 图 片 间距 


分 析 : 


由 于 img 元 素 也 是 inline-block 元 素 ， 因 此 我 们 也 能 使 用 “font- 
size:0” 来 去 除 图 片 之 间 的 间距 。 


如 果 想 要 去 除 inline-block 元 素 的 间距 ， 除 了 “font-size:0”， 还 可 以 使 
用 负 margin、letter-spacing、word-spacing 等 方法 来 实现 。 不 过 其 他 这 几 
种 方法 或 多 或 少 会 有 其 他 问题 ， 而 且 太 多 方法 也 容易 增加 记忆 负担 。 
此 ， 我 们 只 需要 掌握 “font-size:0” 这 一 个 方法 就 行 了 。 


7.1 文本 效果 人 简介 


在 CSS 入 门 阶段 ， 我 们 学 习 了 以 上 文本 样式 属性 。 为 了 让 大 家 有 一 
个 循序 渐进 的 学 习 过 程 ， 在 入 门 时 我 们 只 是 介绍 一 下 基本 的 语法 ， 并 没 
有 深入 学 习 高 级 技巧 。 对 于 这 些 基 本 语法 ， 可 以 查看 《Web 前 端 开发 精 
品 课 HIML 和 CSS 基 础 教程 》。 表 7-1 为 CSS 文 本 属性 及 其 说 明 。 











表 7-1 CSS 文 本 属 怕 


性 














下 划 线 、 删 除 线 、 顶 划 线 
将 英文 文本 转换 为 “小 型 "大 写字 母 























line-height 行 庆 


letter-spacing 字 距 


word-spacing 词 距 








text-decoration、text-transform、letter-spacing 等 属性 相对 比较 简 
单 ， 没 多 少 东 西 可 以 研究 。 这 一 章 带 大 家 深入 学 习 以 下 四 个 属性 。 


(1) text-indent。 
(2) text-align 。 
(3) line-height。 


(4) vertical-align 。 


7.2 ”次 入 text-indent 


我 们 知道 ， 在 CSS 中 可 以 使 用 text-indent 属 性 来 定义 段落 的 首 行 缩 
进 。 在 之 前 “CSS 单 位 ”一 节 中 ， 我 们 学 习 了 关于 text-indent 的 一 个 技巧 : 
使 用 “text-indent:2em;” 来 实现 段落 的 首 行 缩 进 。 在 这 一 节 ， 我 们 来 深入 
学 习 text-indent 的 男 外 一 个 技巧 。 


有 过 开 必 经 验 的 小 伙伴 们 ， 或 多 或 少 会 见 过 “text-indent:-9999px;” 这 
种 写法 。“text-indent:-9999px;” 一 般 用 于 LOGO 部 分 。 在 搜索 引擎 优化 
中 ，h1l 是 非常 重要 的 标签 。 一 般 情 况 下 ， 我 们 都 是 把 网 站 的 LOGO 图 片 
放 到 hl 标签 中 。 不 过 我 们 都 知道 ， 搜 索引 擎 无 法 识别 图 片 ， 只 能 识别 文 
字 。 为 了 更 好 地 优化 SEO， 那 该 怎么 做 呢 ? 


有 一 个 很 好 的 解决 方法 就 是 : 指定 hl 元 素 的 长 宽 与 LOGO 图 片 的 长 
宽 一 样 ， 然 后 定义 h1 的 背景 图 片 (background-image)〉 为 LOGO 图 片 。 
也 就 是 说 ， 我 们 使 用 LOGO 图 片 作为 h1 标 签 的 背景 图 片 ， 然 后 使 用 “text- 
indent:-9999px;” 来 隐藏 h1 的 文字 内 容 。 





举例 ; 





<“!1DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
hi 
{ 
width:366pX 
height:166pX; 
background-image:url("images/logo.jpg"); 
text-indent:-9999px; 
} 
</style> 
</head> 
<body> 
<h1> 绿 叶 学 习 网 </h1> 


</body> 
</html> 


在 浏览 器 预览 效果 如 图 7-1 所 未 。 


/ 口 localhost:1080/test/HT 


> CC Dlocalhost:1080/test/HTMLPag5x | 三 


区 有 叶子 六 网 


estud 





图 7-1 “text-indent:-9999px;” 来 隐藏 h1 的 文字 内 容 


站 而， 


在 这 个 例子 中 ， 使 用 *text-indent:-9999px;” 隐 藏 了 hl 的 内 容 。 如 果 我 
们 没有 使 用 “text-indent:-9999px;”， 得 到 的 效果 如 图 7-2 所 示 。 







站 \ 
0 localhos st:1080/tes st/HTI x \ 


> CC Dlocalhost:1080/test/HTMLPag 


绿叶 学 习 网 
绿叶 学 东 ] 网 

















图 7-2 没有 使 用 “text-indent:-9999px;” 时 的 效果 





除了 “text-indent:-9999px;”， 我 们 还 可 以 使 用 “display:none;” 来 隐藏 
文字 ， 以 便 达 到 预期 效果 ， 实 现代 人 码 如 下 : 


<!DOCTYPE htm]> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
h1 
{ 
width:366px; 
height:166pX; 


background-image:url("images/logo.jpg"); 


} 
h1 span{display:none;} 
</style> 
</head> 
<body> 
<h1><span> 绿 叶 学 习 网 </span></h1> 
</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 7-3 所 示 。 


品 localhost:1080/test/HT! x WW 


> CC [localhost:1080/test/HTMLPags 





多 叶 学 得 网 














7-3 “display:none” 来 隐藏 h1 的 文字 内 容 


分 析 : 


其 实 页 面 效 果 是 达到 了 ， 但 是 搜索 引擎 却 不 吃 这 一 套 ! 为 什么 呢 ? 
对 于 使 用 “display:none;” 来 隐藏 的 文字 ， 搜 索引 敬一 般 都 把 这 些 文字 当 
做 垃圾 信息 而 忽略 ， 此 时 hl 的 权重 会 丢失 。 上 所 以 我 们 不 建议 使 用 这 种 方 


Ts 

对 于 “text-indent:-9999px” 这 个 技巧 ， 大 家 可 以 去 查看 一 下 绿叶 学 习 
网 、w3cschool 首 页 以 及 其 他 网 站 LOGO 部 分 的 源 人 代码。 实际 上 ， 这 个 技 
巧 几 乎 在 所 有 网 站 中 都 能 用 到 ， 大 家 一 定 要 认真 掌握 。 


当然 大 家 想 要 更 好 地 理解 这 个 技巧 ， 也 需要 一 定 搜索 引擎 优化 的 知 
识 。 搜 索引 擎 优化 〈 即 SEO) 也 是 前 端 工程 师 必 备 知识 之 一 。 


【疑问 】 


为 什么 定义 text-indent 为 -9999px， 而 不 是 -999px、-99px 呢 ? 





一 般 电 脑 屏 幕 宽度 有 为 1024px、1366px 等 ， 之 所 以 定义 
为 -9999px， 那 是 为 了 让 文字 的 缩 进 足够 大 ， 就 算是 大 分 辨 率 电 脑 下 也 
看 不 到 文字 ， 因 为 没有 哪 台 电脑 的 屏幕 宽度 大 于 9999px。 如 果 你 定义 
text-indent 为 -999px 或 者 -99px， 那 么 缩 进 的 文字 还 是 有 可 能 会 出 现在 浏 
览 器 窗口 内 。 





7.3 ”深入 text-align 





在 CSS 中 ， 我 们 可 以 使 用 text-align 属 性 来 控制 文本 以 及 图 片 的 对 齐 
方式 。text-align 属 性 取 值 如 表 7-2 所 示 。 





表 7-2 text-align 属 性 取 值 














text- align 丰 有 一 个 属 性 值 2yjustify (两 端 对 齐 )， 不 过 由 于 这 个 属 
性 值 本 身 会 产生 一 些 问 题 ， 所 以 在 实际 开发 中 比较 少 用 。 





举例 ; 





<!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 
<style type="text/css"> 
div 
{ 
width:246px; 
height :166pX; 
border:1px solid gray 
text-align:center; 


</style> 


</head> 
<body> 
<div> 
<img src="images/haizei2.png" alt=""/> 
</div> 
<div> 海 贼 王 娜 美 </div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 7-4 所 示 。 











海贼王 娜 美 











图 7-4 ”text-align 作 用 于 文字 和 图 片 


分 析 : 


从 这 个 例子 我 们 可 以 看 出 ，text-align 属 性 对 文字 和 图 片 都 起 作用 。 
7.3.1 ”text-align 起 作用 的 元 素 


有 人 问 ，text-align 属 性 是 不 是 就 只 对 文字 和 图 片 起 作用 呢 ? 管 案 是 
否定 的 。 一 个 比较 准确 的 说 法 是 : text-align 对 文字 、inline 元 素 ( 行 内 元 
素 ) 以 及 inline-block 元 系 《〈 行 内 块 元 么 ) 起 作用 ， 但 对 块 元 素 不 起 作 
用 。 其 中 ，img 元 素 属 于 inline-block 元 素 。 











举例 ; 


<!1DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#0uter-box 
{ 
width:126px; 
height:86px; 
border:1px solid gray 
text-align:center; 
} 


#inner-box 


{ 


width:56px; 
height:58px; 
background-color:Orange; 


} 
</style> 
</head> 
<body> 
<div id="outer-box"> 
<div id="inner-box"></div> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 7-5 所 示 。 


图 7-5 textralign 属 性 对 div 不 起 作用 























我 们 都 知道 div 是 块 元 素 ， 如 果 想 要 使 用 水 平 居中 div 元 素 ， 可 以 先 
使 用 “display:inline-block” 来 将 div 转 化 为 inline-block 元 素 ， 然 后 再 使 
用 “text-align:center”。 当 然 ， 在 后 面 “水 平 居 中 ”一 节 我 们 会 详细 给 大 家 








介绍 更 多 关于 水 平 居中 元 素 的 技巧 。 
7.3.2 “text-align:center;” 与 “margin:0 auto;” 的 区 别 


在 页 面 水 平 居中 实现 中 , “textralign:center;” 与 “margin:0 auto;” 是 最 
和 常见 的 两 种 水 平 居 中 方式 。 不 过 这 两 者 也 有 着 本 质 的 区 别 。 


(1) “text-align:center;” 实 现 的 是 文字 、inline 元 素 以 及 inline-block 
元 素 的 水 平 居 中 。 


(2)“margin:0 auto;” 实 现 的 是 块 元 素 的 水 平 居中 。 


(3)“text-align:center;” 在 父 元 素 中 定义 ，“margin:0 auto;” 在 当前 元 
素 中 定义 。 





7.4 深入 line-height 





在 CSS 中 ， 我 们 可 以 使 用 line-height 属 性 来 控制 文本 的 行 高 。 很 多 书 
称 line-height 为 行 间距 ， 其 实 这 是 非常 不 严谨 的 叫 法 。 行 高 ， 顾 名 思 义 
就 是 “一 行 的 高 度 ”， 而 行 间 距 指 的 是 “两 行文 本 之 间 的 距离 ”两 者 是 完 
全 不 一 样 的 概念 。 这 一 节 ， 我 们 来 深入 学 习 一 下 line-height 属 性 。 








7.4.1 line-height 的 定义 


在 CSS 中 ，line-height 还 有 一 个 更 加 准确 的 定义 : 两 行文 字 基 线 之 间 
J 距离 。 


1。 顶 线 、 中线 。 基线 。 诺 入 


我 们 都 用 过 英文 每 ， 喘 文 短 每 一 行 都 有 4 条 线 ， 这 4 条 线 分 别 是 : 顶 
线 、 中 线 、 基 线 和 底线 ， 如 图 7-6 所 示 。 
一 > 顶 线 (top ) 
—xhtmi— 一 ”中线 (middle ) 
一 基线 (baseline ) 


一 底线 ( bottom ) 





图 7-6 ”项 线 、 中 线 、 基 线 、 底 线 


在 CSS 中 ， 每 一 行文 字 可 以 看 成 一 个 “和 二 而 每 一 个 行 盒 子 都 
有 4 条 线 : 顶 线 、 0 基线 和 底线 。 没 错 ， 这 四 条 线 跟 英文 竹中 的 四 
条 线 是 一 样 的 道理 。 


此 外 ，vertical-align 属 性 中 的 tbtp、middle、baseline、bottom 这 四 个 
属性 值 分 别 对 应 的 就 是 : 顶 线 、 中 线 、 基 线 、 底 线 。 


注意 一 下 ， 基 线 并 不 是 行 盒子 中 最 下 面 的 线 ， 而 是 倒数 第 二 条 线 。 
由 此 我 们 很 清楚 地 知道 line-height 究 竟 指 的 是 什么 。 














2. 行 高、 行距 与 半 行 距 


(1) 行 高 。 





行 高 〈 即 line-height) ， 指 的 是 “两 行 基线 之 间 的 垂直 距离 >”， 如 图 7- 
7 所 示 。 


|vye 


半 行 距 半 行 距 分 割 线 es 行 高 
行 框 - wsz- -helicopter 
半 行 距 分 割 线 
一 > 顶 线 (top ) 


了 乡 idd| 
字符 中 心 全 一 一 Xhtpn 上 FE 一 2 a 


一 底线 (bottom ) 


图 7-7 ”line-height 分 析 图 
有 些小 伙伴 就 会 问 了 : 为 什么 W3C 要 这 样 去 定义 line-height 呢 ? 直 
接 定 义 line-height 为 两 条 底线 之 间 的 距离 也 不 是 更 好 理解 么 ?规则 这 东 
西 咏 ， 都 是 官方 定义 的 ， 我 们 只 需要 去 遵循 承 行 了 。 这 就 跟 我 们 过 马路 
一 样 ， 没 必要 纠结 为 什么 是 “绿灯 走红 灯 停 >， 而 不 是 “ 红 灯 走 绿灯 停 ”。 
(2) 行距 。 


行距 ， 指 的 是 上 一 行 的 确 线 到 下 一 行 的 项 线 的 垂直 距离 。 也 就 是 两 
行文 字 之 间 的 空隙 。 


(3) 半 行 距 。 
半 行 距 ， 很 好 理解 ， 指 的 是 行距 的 一 半 。 
为 什么 要 搞 一 个 半 行 距 出 来 呢 ?” 其 实 这 就 是 为 了 引出 在 下 面 所 提 到 








的 “ 行 框 (inline box) ”。 
3. 内 容 区 与 行 框 
(1) 内 容 区 。 
内 容 区 ， 指 的 是 行 盒子 项 线 到 底线 之 间 的 垂直 距离 。 
《2) 行 框 。 
行 框 ， 指 的 是 两 行文 字 “ 行 半 距 分 割 线 ?之 间 的 垂直 距离 。 
7.4.2 line-height 取 值 


1，height 和 line-height 





line-height 有 默认 值 ， 当 没有 定义 line-height 属 性 时 ， 浏 览 器 就 会 采 
用 默认 的 line-height 值 。 


一 行文 字 的 高 度 是 由 line-height 决 定 ， 而 不 是 由 height 决 定 的 。 例 如 
在 p 标 签 中 ， 一 个 p 标 签 的 文字 可 以 有 很 多 行 ， 其 中 line-height 定 义 的 是 
一 行文 字 的 高 度 ， 而 height 定 义 的 是 整个 段落 的 高 度 (p 标 签 的 高 度 ) 。 


在 CSS 中 ， 我 们 可 以 定义 height 和 line-height 这 两 个 属性 值 相 等 ， 从 
而 来 实现 单行 文字 的 垂直 居中 。 这 是 经 常 使 用 到 的 一 个 技巧 ， 希 望 大 家 
记 住 。 

















举例 ; 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 


{ 


width:246px; 
height:68px; 
border:1px solid gray; 
font-size:12px; 
text-align:center; 
} 
#div1i{line-height:26px;} 
#div2{line-height:46px;} 
#div3{line-height:66px;} 
</style> 
</head> 
<body> 
<div id="div1">height 为 56px，line-height 为 28px</div> 
<div id="div2">height 为 56px，line-height 为 46px</div> 
<div id="div3">height 为 56px，line-height 为 66px</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 7-8 所 示 。 


hei ght 汶 50px，1ine-height 汐 20px 





height 汶 50px，1ine-height 为 40px 





hei ght 汶 50px，1ine-height 为 6B0px 





图 7-8 ”单行 文字 垂直 居中 








为 什么 定义 height 和 1line-height 这 两 个 属性 值 相 等 ， 束 可 以 实现 单行 
文字 的 垂直 居中 呢 ? 从 上 面 这 个 例子 ， 我 们 可 以 很 直观 而 感性 地 认 知 。 





2. line-height 取 值 为 百分比 值 、em 值 








当 line-height 值 为 百分比 值 或 者 em 值 时 ， 当 前 元 素 的 行 高 是 相对 于 
父 元 素 的 font-size 值 来 计算 的 。 计 算 公 式 如 下 : 


line-height ( 父 元 素 font-size) x《〈 百 分 比 ) 


line-height 〈 父 元 素 font-size) x (em 值 ) 





举例 : 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
body{font-size:306px;} 
#0Uter-box 
{ 
/*# 父 元 素 行 高 : 38pxx156%=45px*/ 
line-height:156%; 
background-color:Red; 
color:White; 
} 


#inner-box 


{ 


/* 子 元 素 行 高 ，386pxx156%=45px〔 继 承 父 元 素 的 line-height) */ 
font-size:28px; 

background-color:Purple; 

color:White; 


} 

</style> 
</head> 
<body> 

<div id="outer-box"> 这 是 父 元 素 

<div id="inner-box"> 这 是 子 元 素 </div> 

</div> 
</body> 
</html> 














在 浏览 器 预览 效果 如 图 7-9 所 示 。 





图 7-9 ”line-height 取 值 为 百分比 值 





分 析 : 


在 上 面 这 上 段 代 码 中 ，#outer-box 的 行 高 为 30pxx 1.5=45px。 由 于 line- 
height 具 有 继承 性 ， 当 line-height 取 值 为 百分比 时 ， 会 直接 继承 父 元 素 的 
line-height《〈 除 非 自 己 指定 line-height) 。 


3. line-height 取 值 为 无 单位 数字 
line-height 还 支持 无 单位 数字 的 属性 取 值 ， 在 CSS 中 也 只 有 line- 


height 属 性 具有 这 个 特点 。 当 line-height 值 为 无 单位 数字 时 ， 实 际 的 行 高 
是 相对 于 当前 元 素 的 font-size 值 来 计算 的 。 计 算 公 式 如 下 : 





line-height = (当前 元 素 的 font-size) x《〈 无 单位 数字 ) 


举例 ; 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 
<style type="text/css"> 
body{font-size:36px;} 
#0uter-box 


/#+ 父 元 素 行 高 : 38pxx1.5=45px*/ 
line-height:1.5; 


background-color:Red 
color:White; 


} 


#inner-box 


/* 子 元 素 行 高 ，28pxx1.5=38px〔 继 承 父 元 素 的 系数 ) */ 
font-size:20pX; 
background-color:Purple; 
color :White; 
} 
</style> 
</head> 
<body> 
<div id="outer-box"> 这 是 父 元 素 
<div id="inner-box"> 这 是 子 元 素 </div> 





</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 7-10 所 示 。 





图 7-10 line-height 取 值 为 无 单位 数字 


分 析 : 


在 上 面 这 段 代码 中 ，#outer-box 的 行 高 为 30pxx 1.5=45px，##nner- 
box 的 行 高 为 20pxx1.5=30px。 也 就 是 说 当 line-height 取 值 为 无 单位 数字 
时 ， 该 无 单位 数字 可 以 理解 为 一 个 系数 。 子 元 又 继承 的 是 父 元 素 的 系 
数 ， 不 会 直接 继承 父 元 素 的 line-height。 





7.5 ”深入 vertical-align 


vertical-align， 很 多 人 对 这 个 属性 感到 很 陌生 ， 也 不 知道 怎么 去 使 
用 ， 其 实 这 都 是 由 于 没有 深入 属性 的 本 质 所 导致 的 。vertical-align 属 性 
非常 复杂 ， 但 是 也 相当 强大 。 这 一 节 给 大 家 介绍 vertical-align 属 性 最 实 
用 的 技巧 ， 而 对 于 不 常用 的 东西 则 不 进行 深入 研究 。 


W3C 官 方 对 vertical-align 属 性 的 定义 有 四 个 方面 。 


《1) vertical-align 属 性 用 于 定义 “周围 的 文字 、inline 元 又 以 及 inline- 
block 元 素 ” 相 对 于 该 元 素 基 线 的 垂直 对 齐 方式 。 这 里 的 “该 元 素 ” 指 的 是 
被 定义 了 vertical-align 属 性 的 元 素 。 


(2) 在 表格 单元 格 中 ，vertical-align 属 性 可 以 定义 单元 格 td 元 素 中 
内 容 的 对 齐 方式 。td 元 素 是 table-cell 元 素 ， 也 就 是 说 vertical-align 属 性 对 
table-cell 类 型 元 素 有 效 。 

















(3) vertical-align 属 性 对 inline 元 素 、inline-block 元 素 和 table-cell 元 
素 有 效 ， 对 块 元 素 无 效 。 


(4) vertical-align 属 性 允许 指定 负 长 度 值 《如 -2px) 和 百分比 值 
(如 509%6) 。 


从 上 一 节 我 们 知道 ， 每 一 行文 字 可 以 看 成 一 个 行 合子， 其实 每 一 个 
inline-block 元 素 也 可 以 看 成 一 个 行 盒 子 。 其 中 ， 每 一 个 行 盒子 都 有 四 条 
线 : 顶 线 、 中 线 、 基 线 和 底线 ， 如 图 7-11 所 示 。 这 四 条 线 跟 英文 竹中 的 
四 条 线 是 相似 的 。 


一 > 顶 线 (top ) 
有 二 一 * 中 线 (middle) 
一 基线 (baseline ) 
-一 底线 (bottom ) 








图 7-11 ” 顶 线 、 中 线 、 基 线 、 底 线 
vertical-align 属 性 中 的 基线 跟 line-height 属 性 中 的 基线 是 一 样 的 道 





理 。 在 CSS 中 ，vertical-align 属 性 最 见 的 属性 值 有 四 个 : top《〈 顶 部 对 
齐 ) 、middle (中 部 对 齐 ) 、baseline (基线 对 齐 ) 、bottom (底部 对 
齐 ) 。 


7.5.1 “vertical-align 必 性 取 值 
vertical-align 属 性 取 值 有 三 种 情况 : 负 值 、 百 分 比 和 关键 字 。 





1 ' 山 但 


vertical-align 属 性 取 值 可 以 为 负 值 ， 例 如 “vertical-align:-2px” 表 示 元 
素 相对 于 基线 同 下 偏 移 2px。 此 方法 常常 用 于 解决 单 选 框 或 复 选 框 与 文 
字 牌 直 对 齐 的 问题 。 对 于 这 个 技巧 ， 我 们 在 下 一 章 “ 表 单 效果 ”会 详细 介 


绍 。 





2. 百分比 


vertical-align 属 性 取 值 可 以 为 百分比 ， 这 个 百分比 是 相对 于 当前 元 
素 所 继承 的 line-height 属 性 值 决 定 的 。 


举 个 例子 ， 对 于 “vertical-align:50%”， 假 如 当前 元 素 所 继承 的 line- 
height 为 20px， 则 “vertical-align:50%” 实 际 上 等 价 于 “vertical- 
align:10px”。 其 中 ， vertical-align:10px” 表 示 元 素 相对 于 基线 向 上 偏 移 
10px。 














3， 关键 字 





vertical 属性 取 值 可 以 为 关键 字 ， 取 值 如 表 7-3 所 示 。 
表 7-3 vertical 属 性 取 值 为 “关键 字 ” 








说 明 





顶部 对 齐 


middle 中 部 对 齐 


baseline 











除了 以 上 这 些 ，vertical-align 属 性 取 值 还 可 以 为 text-top、text- 
bottom、super、sub 等 关键 字 。 不 过 其 他 关键 字 在 实际 开发 中 很 少 用 得 
上 ， 因 此 我 们 只 需要 掌握 top、middle、baseline、bottom 这 四 个 属性 值 就 
人 


2 


< IlDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>vertical-align 属 性 </title> 
<style type="text/css"> 
img{width:86px;height:86px;} 
#imgl{vertical-align:top;} 
#img2{vertical-align:middle;} 
#img3{vertical-align:bottom;} 
#img4{vertical-align:baseline;} 
</style> 





</head> 


<body> 
绿叶 学 习 网 <img id="img1"” src="images/girl.png"” alt=""/> 绿 叶 学 习 网 (<stron 
<hr/> 
绿叶 学 习 网 <img id="img2"” src="images/girl.png" alt=""/> 绿 叶 学 习 网 (<stron 
<hr/> 
绿叶 学 习 网 <img id="img3"” src="images/girl.png" alt=""/> 绿 叶 学 习 网 (<stron 
<hr/> 
绿叶 学 习 网 <img id="img4"” src="images/girl.png”alt=""/> 绿 叶 学 习 网 (<stron 

</body> 

</html> 











在 浏览 絮 预 换 效 果 如 图 7-12 所 示 。 


绿叶 学 习 网 了 了 绿叶 学 习 网 top) 


绿叶 学 习 网 和 _ 强 叶 学 习 网 (middle) 


: | 


绿叶 学 习 网 多 
绿叶 学 习 网 全 绿叶 学 习 网 (baseline) 


La ode 


绿叶 学 习 网 【bottom) 





图 7-12 ”vertical-align 各 个 属性 值 效果 





分 析 : 


根据 W3C 的 定义 ，vertical-align 属 性 用 于 定义 周围 文字 、inline 元 素 
或 inline-block 元 系 的 基线 相对 于 该 元 素 的 基线 的 垂直 对 齐 方式 。 在 这 个 
例子 中 ，vertical-align 属 性 定义 了 周围 的 文字 相对 于 img 元 素 基 线 的 垂直 
对 齐 方式 。 


此 外 ， ， align:baseline” 和 “vertical-align:bottom” 是 有 区 别 的 ， 
请 仔细 观察 预览 效果 。 


7.5.2 ”vertical-align 属 性 应 用 

















我 们 从 以 下 三 个 方面 来 介绍 一 下 vertical-align 属 性 的 使 用 情况 : 
inline-block 元 素 、inline 元 素 和 块 元 素 、table-cell 元 素 。 


1，inline 元 素 和 inline- 块 元 素 


在 HIML 中 ， 第 见 的 inline-block 元 素 有 两 个 :img 元 素 和 input 元 
素 。 对 于 这 两 个 inline-block 元 素 ， 我 们 一 定 要 记 住 。 


举例 ; 


<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
strong 


{ 


font-size:48px; 


border:1px solid red; 
} 
span{font-size:12px;} 
</style> 
</head> 
<body> 
<span> 绿 叶 学 习 网 /span><strong> 绿 叶 学 习 网 /strong><span> 绿 叶 学 习 网 /spany> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 7-13 所 示 。 
| 绿叶 学 习 网 
， 绿叶 学 习 网 了? 局 叶 学 习 网 


图 7-13 ”未 设置 “vertical-align:middle” 的 strong 元 素 





当 我 们 在 CSS 中 为 strong 元 素 添 加 “vertical-align:center;” 之 后 ， 浏 览 
器 预览 效果 如 图 7-14 所 示 。 


“绿叶 学 习 网 wn 


图 7-14 ”设置 “vertical-align:middle” 后 的 strong 元 素 





准 例 : 


<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 
<style type="text/css"> 
ijmg{vertical-align:middle;} 


</style> 
</head> 
<body> 
<div> 绿 叶 学 习 网 <img src="images/girl.png”alt=""/> 绿 叶 学 习 网 (<strong>mid 
</body> 
</html> 





在 浏览 絮 预 换 效 果 如 图 7-15 所 示 。 


绿叶 学 习 网 ”4 时 绿叶 学 习 网 (middle) 





图 7-15 ”设置 了 “vertical-align:middle” 的 图 片 
2. 块 元 素 


vertical-align 属 性 对 inline 元 素 、inline-block 元 素 和 table-cell 元 素 有 
效 ， 对 块 元 素 无 效 。 


举例 : 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 
{ 
vertical-align:middle; 
width:126px; 


height:126pX; 
border:1px solid gray 


} 
</style> 
</head> 
<body> 
<div><img src="images/girl.png" alt=""/></div> 
</body> 
</html> 





在 浏览 絮 预 览 效 果 如 图 7-16 所 示 。 


图 7-16 ”设置 “vertical-align:middle” 的 div 元 素 





分 析 : 


div 是 块 元 素 ， 所 以 vertical-align 属 性 对 其 无 效 。 如 果 想 要 在 div 中 实 
现 图 片 的 垂直 居中 ， 我 们 可 以 先 为 div 定 义 display:table-ceall， 也 就 是 将 块 
元 素 转化 为 table-cell 元 素 〈 表 格 单 元 格 ) ， 然 后 再 使 用 vertical- 
align:middle 就 可 以 实现 了 。 


举例 : 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 
{ 
display:table-cell; 
vertical-align:middle; 


width:126pX; 
height:126pX; 
border:1px solid gray 


} 
</style> 
</head> 
<body> 
<div><img src="images/girl.png" alt=""/></div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 7-17 所 示 。 


六 


图 7-17 “vertical-align:middle” 实 现 图 片 垂直 居中 于 div 元 素 














在 div 中 实现 图 片 垂直 居中 是 很 常见 的 技巧 ， 我 们 在 后 续 章节 会 给 
大 家 介绍 更 多 垂直 居中 的 技巧 。 





3. table-cell 元 素 


W3C 定 义 ， 在 表格 单元 格 中 ，vertical-align 属 性 可 以 定义 单元 格 中 
内 容 的 对 齐 方式 。 也 就 是 说 vertical-align 属 性 对 table-cell 类 型 元 素 有 效 。 


这 里 要 注意 一 下 ，table-cell 元 素 跟 inline、inline-block 元 素 使 用 





vertical-align 是 有 很 大 区 别 的 。 


(1) inline 元 素 和 inline-block 元 素 的 vertical-align 是 针对 周围 的 元 素 











来 说 的 ，vertical 定 义 的 是 周围 元 素 相对 于 当前 元 素 的 对 齐 方式 。 


(2) table-cell 元 素 的 vertical-align 属 性 是 针对 自身 而 言 。vertical- 




















align 定 义 的 是 内 部 子 元素 相 对 于 目 身 的 对 齐 方式 。 


举例 ; 


<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<title></title> 
<style type="text/css"> 
td 
{ 


width:126pX; 
height:126pX; 
border:1px solid gray 
vertical-align:middle; 


} 
</style> 
</head> 
<body> 
<table> 
<tr> 


<td><img src="images/girl.png" 
<td><img src="images/girl.png" 
<td><img src="images/girl.png" 


</tr> 
</table> 
</body> 
</html> 


alt=""/></td> 
alt=""/></td> 
alt=""/></td> 





在 浏览 器 预览 效果 如 几 7-18 所 示 。 


了 下 
|| 


7-18 ”设置 了 “vertical-align:middle” 的 td 元 素 





这 一 章 学 习 到 的 知识 ， 估 计 已 经 狠 狠 地 给 那些 天 天 自 读 “ 精 通 
CSS” 的 同学 几 巴 掌 了 。 原 来 ，CSS 也 是 如 此 博大 精深 ， 并 非 我 们 想象 中 
那么 简单 。 对 于 HTML、 CSS 和 JavaScript 这 三 大 核 ， 心 技 术 ， 还 是 希望 大 
家 能 够 踏 踏实 实地 深入 研究 ， 这 样 我 们 的 前 端 之 路 才 有 可 能 走 得 更 远 。 





8.1 表单 效果 人 简介 


表单 ， 在 实际 开 友 中 十 分 和 常见， 几乎 每 一 个 网 站 都 会 涉及 表单 。 一 
个 表单 是 否 美观 ， 对 用 户 体 验 来 说 非常 重要 。 毕 竞 在 一 个 站 点 中 ， 表 单 
是 用 户 注 册 登 录 经 第 用 到 的 东西 。 别 看 一 个 表单 结构 那么 简单 ， 有 了 时候 
使 用 CSS 操 作 起 来 是 一 件 很 头疼 的 事情 。 如 果 让 我 们 来 控制 表单 的 外 
观 ， 估 计 不 少 小 伙伴 会 出 现 各 种 各 样 的 问题 ， 例 如 文本 框 与 文字 不 能 对 
齐 ， 复 选 框 与 文字 没有 垂直 居中 ， 图 8-1 为 绿叶 学 习 网 中 的 表单 。 

















登录 到 绿叶 学 习 网 
账号 : 
密码 : 
验证 码 : 
上 十 天 内 免 登录 忘记 密码 ? 











图 8-1 绿叶 学 习 网 中 的 表单 
这 一 章 我 们 从 以 下 三 个 方面 来 深入 学 习 一 下 表单 开发 技巧 。 
(1) 深入 radio 和 checkbox。 








(2) 深入 textarea。 
(3) 表单 对 齐 。 
在 这 一 章 我 们 只 介绍 表单 中 的 CSS 技 巧 ， 对 于 表单 的 动态 操作 ， 如 





文本 框 聚 焦 失 焦 、 单 复 选 框 全 选 等 ， 可 以 关注 绿叶 学 习 官 网 的 JavaScript 
教程 或 jQuery 教程 。 


8.2 ”深入 radio 和 checkbox 


radio 指 的 是 单 选 框 ， 而 checkbox 指 的 是 复 选 枉 。 对 于 radio 和 
我 们 主要 来 学 习 一 个 方面 就 行 了 : 单 选 框 复 选 框 与 文字 垂直 
后 六 To 


现在 大 部 分 网 站 的 主流 字体 大 小 都 是 12px〈 如 图 8-2 所 示 ) 或 者 
14px〔 如 图 8-3 所 示 〉。 在 表单 开发 中 ， 无 论 是 12px， 还 是 14px， 文 字 
与 单 选 框 或 复 选 框 都 是 不 对 齐 的 ， 感 觉 特别 难看 ， 用 户 体 验 比 较 差 。 





chrome 浏 览 器 : ; 晤 单 选 枉 四 复 选 框 ， 





图 8-2 ”字体 大 小 为 12px 





图 8-3 ”字体 大 小 为 14px 


之 前 我 们 接触 过 vertical-align 属 性 ， 单 选 框 或 复 选 框 与 文字 默认 情 
况 下 是 以 vertical-align:baseline 的 方式 对 齐 的 ， 这 也 是 导致 单 选 框 或 复 选 











框 与 文字 在 垂直 方向 不 居中 对 齐 的 原因 。 因 此 ， 我 们 可 以 使 用 vertical- 
align 属 性 来 解决 。 


语法 : 
说 明 : 


我 们 分 两 种 情况 考虑 。 
(1〉 当 文字 大 小 为 12px 时 ， 我 们 给 单 选 框 或 复 选 框 定义 “vertical- 
align:-3px” 即 可 解决 对 齐 问题 。 


(2) 当 文 字 大 小 为 14px 时 ， 我 们 给 单 选 框 或 复 选 框 定义 “vertical- 
align:-2px" 即 可 解决 对 齐 问 题 。 


其 中 ，“vertical-align:-3px” 表 示 元 素 相对 于 基线 向 下 偏 移 3px。 对 于 
基线 的 概念 ， 我 们 在 “7.4 ”深入 line-height 属 性 ”一 节 详 细 给 大 家 介绍 
J 











举例 : 





<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
/* 文 字 大 小 为 12px*/ 
#p1{font-size:12px;} 
#p1 input{vertical-align:-3px;} 


/* 文 字 大 小 为 14px*/ 
#p2{font-size:14px;} 
#p2 input{vertical-align:-2px;} 
</style> 
</head> 
<body> 
<p id="p1"> 
<input id="rdo1" type="radio" /><label for="rdo1"> 单 选 框 </1abel> 
<input id="cbk1" type="checkbox"” /><label for="cbk1"> 复 选 框 </1label> 
</p> 
<p id="p2"> 
<input id="rdo2" type="radio" /><label for="rdo2"> 单 选 框 </1abel> 
<input id="cbk2" type="checkbox” /><label for="cbk2"> 复 选 框 </1abel> 
</p> 
</body> 
</html> 














在 浏览 器 预览 效果 如 图 8-4 所 示 。 


单 选 框 口 复 选 框 
单 选 框 口 复 选 杠 





图 8-4 ”vertical-align 实 现 单 选 框 和 复 选 框 与 文字 对 齐 


分 析 : 








上 面 是 文字 大 小 为 12px 和 14px 时 的 解决 方法 ， 如 果 你 的 页 面 文字 大 
小 为 15px、16px 等 ， 办 法 也 是 一 样 的 。 我 们 只 需要 稍微 调整 一 下 
vertical-align 属 性 的 数值 ， 直 到 效果 满意 即 可 ， 很 简单 。 


8.3” 深入 textarea 








textarea 指 的 是 文本 域 。 对 于 textarea， 有 两 个 方面 需要 我 们 深入 学 
Is 


(1) 固定 大 小 ， 禁 用 拖 动 。 
(2) 在 chrome、Firefox 和 和 IE 实现 相同 的 外 观 。 


8.3.1 固定 大 小 ， 蔡 用 拖 动 


在 主流 浏览 器 中 ， 如 果 我 们 使 用 Chrome 或 Firefox 浏 览 器 ， 会 发 现 
textarea 元 系 右 下 角 有 一 个 小 三 角 ， 如 图 8-5 所 示 。 当 用 鼠标 拖 搜 小 三 角 
的 时 候 ， 我 们 会 发 现 textarea 可 以 放大 或 缩小 。Chrome 浏 览 器 和 Firefox 
浏览 器 都 有 这 个 功能 ， 但 是 下 浏览 器 是 没有 的 ， 如 图 8-6 所 示 。 


其 实 这 个 功能 是 浏览 器 方便 用 户 而 添加 的 ， 因 为 前 端 开 发 人 员 在 设 
计 页 面 的 时 候 ， 为 了 页 面 布 局 ， 一 般 会 给 textarea 设 定 一 个 固定 的 长 度 。 
但 是 有 些 用 户 往往 会 认为 textarea 太 小 或 者 太 大 了 。 有 了 小 三 角 拖 搜 的 功 
能 ， 用 户 就 可 以 自己 调整 合适 的 大 小 了 。 








图 8-5 ”Chrome 浏览 器 下 的 textarea 











图 8-6” 正 浏览 器 下 的 textarea 
但 是 我 们 知道 ， 如 果 用 户 过 分 拖 动 textarea 的 大 小 会 影响 页 面 布 局 ， 


,I 因此 在 实际 开发 中 我 们 往往 都 是 设 定 固 定 大 小 或 者 禁 
止 拖 动 。 











1. 固定 大 小 


在 CSS 中 ， 我 们 可 以 使 用 min-width 和 min-height 来 定义 textarea 的 最 
小 宽度 和 最 大 高 度 ， 也 可 以 使 用 max-width 和 max-height 来 定义 textarea 的 
最 大 宽度 和 最 大 高 度 。 








< 人 


<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
textarea 


{ 


width:1660px; 
height:86px; 


maXx-width:266pX; 
max-height:168px; 
} 
</style> 
</head> 
<body> 
<textarea></textarea> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 8-7 所 示 。 


图 8-7 textarea 国定 大 小 


一 般 情 况 下 对 于 textarea 元 素来 说 ，min-width 和 min-height 用 得 较 
少 ，max-width 和 max-height 用 得 较 多 。max-width 和 max-height 可 以 控制 
textarea 的 最 大 宽度 和 最 大 高 度 ， 使 得 用 户 在 拖 动 小 三 角 的 同时 ， 不 会 破 
坏 原 来 的 布局 。 








2. 禁止 拖 动 





如 果 我 们 想 要 彻底 禁止 用 户 拖 动 小 三 角 来 改变 textarea 元 素 大 小 ， 可 
以 使 用 CSS 中 的 resize 属 性 来 实现 。 


语法 : 
说 明 : 


“Tesize:none” 表 示 禁 用 textarea 元 素 的 拖 动 功能 ， 此 时 textarea 元 素 右 
下 方 的 小 三 角 会 消失 。 


举例 : 





<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
textarea 


{ 


width:166pX; 
height:86px; 
resize:none; 


} 
</style> 
</head> 
<body> 
<textarea></textarea> 
</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 8-8 所 示 。 


图 8-8 ”textarea 禁 止 拖 动 


分 析 : 


如 果 想 要 禁止 用 户 拖 动 textarea， 除 了 可 以 用 “resize:none” 之 外 ， 
有 一 种 方法 : 将 max-width 与 width 定义 相同 值 ， 并 且 将 max-height 本 
height 定 义 相 同 值 。 不 过 在 实际 开发 中 ， 还 是 推荐 使 用 “resize:none” 这 种 
实现 方式 比较 简单 。 


8.3.2 ”在 chrome、Firefox 和 和 IE 实现 相同 的 外 观 

textarea 元 素 有 cols 和 rows 两 个 属性 ， 其 中 cols 用 来 控制 列 数 〈 也 惑 
是 每 行文 字 个 数 ) ，rows 用 来 控制 行 数 。 但 是 如 果 使 用 cols 和 rows 属 性 
来 控制 textarea 的 外 观 大 小 ， 我 们 会 发 现 以 下 两 个 特点 。 


(1) Chrome 〈 或 Firefox) 和 IE 下 ， 每 行 字 数 和 文字 的 列 数 是 不 相 
同 的 。 


(2) 默认 情况 下 ， 焉 是 有 滚动 条 的 ， 而 Chrome 〈 或 Firefox) 是 没 
有 滚动 条 的 〈 从 图 8-5 和 图 8-6 可 以 看 出 ) 。 


那 在 实际 开发 中 ， 人 怎么 使 得 textarea 在 Chrome (或 Firefox) 和 IE 下 


具有 相同 的 外 观 效 果 呢 ? 其 实 很 简单 。 
(1) 使 用 CSS 的 width 和 height 来 定义 textarea 的 大 小 。 


(2) 使 用 “overflow:auto” 来 定义 textarea 的 滚动 条 自 适 应 。 
举例 : 


<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
textarea 


{ 


width:166px; 
height:86px; 


overflow:auto; 
resize:none; 
} 
</style> 
</head> 
<body> 
<textarea></textarea> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 8-9 所 示 。 


图 8-9 ”在 Chrome、Firefox 和 了 IE 实现 相同 的 textarea 外 观 


对 于 上 面 这 个 例子 代码 ， 我 们 自行 在 各 个 浏览 器 中 查看 ，textarea 元 
素 的 外 观 都 是 一 样 的 。 


8.4 ”表单 对 齐 


在 表单 操作 中 ， 我 们 经 常 要 实现 如 下 图 8-10 所 示 的 对 齐 效 果 ， 左 边 
古文 字 ， 右 边 是 表单 元 素 。 表 单元 系 排列 很 整齐 ， 非 常 美观 。 表 单 对 
齐 ， 古 表单 操作 中 必然 碰 到 的 一 件 事 。 看 似 很 简单 ， 如 果 不 民 得 拉 巧 ， 
实现 起 来 并 不 一 定 很 容易 。 











图 8-10 ”百度 的 注册 表单 

为 了 实现 对 齐 ， 不 少 初学 者 都 是 直接 对 input 或 label 元 素 进行 逐个 设 
置 padding 或 者 margin 来 慢 慢 调 ， 这 样 使 得 CSS 代 码 非 常 多 ， 也 难以 维 
护 。 

很 多 大 型 网 站 包括 百度 、 京 东 、 腾 讯 等 都 是 采用 如 下 方法 来 实现 。 

(1) 每 一 行 表 单 分 为 左 栏 加 若干 右 栏 。 所 有 行 的 左 栏 长 度 相 等 ， 
所 有 行 的 右 栏 所 有 盒子 长 度 之 和 相等 。 左 栏 一 般 是 一 个 label， 右 栏 是 知 
于 小 又 本 框 。 

(2) 所 有 左 栏 盒 子 和 右 栏 盒子 都 设置 为 左 浮动 。 

(3) 左 栏 text-align 属 性 定义 为 right， 使 得 文字 右 对 齐 。 


(4) 最 重要 一 点 ， 每 一 行 中 左 栏 长 度 和 右 栏 所 有 盒子 的 总 长 度 之 
和 等 于 行 宽 。 这 里 的 盒子 是 包括 width、padding、border 和 margin 的 。 


我 们 还 是 先 看 一 个 例子 。 




















举例 : 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
form 


{ 


width:326px; 
font-family:Arial; 
font-size:14px; 
font-weight:bold; 
} 
/* 清 除 每 一 个 p 中 的 浮动 */ 
p{overflow:hidden;} 
label 


{ 








float:1left; 
width:66pX; 
height:46px; 
line-height:46px; 
text-align:right; 
margin-right:16px; 


} 

input:not(#submit) 

{ 
float:1left; 
height:16px; 
padding:16pX; 
border:1px solid silver; 

} 

#tel ,#pwd 

{ 
width:228px; 

} 

#verifyCode 

{ 
width:118px; 
margin-right:16px; 

} 

#submit 

{ 


width:166px; 
height:46px; 


border:1px solid gray 
padding:6; 
background-color:#F1F1F1; 


} 
</style> 
</head> 
<body> 


<form action=" 


<p> 
<label 
<input 

</p> 

<p> 
<label 
<input 

</p> 

<p> 


<label 
<input 
<input 
</p> 
</form> 
</body> 
</html> 


index.html"> 


for="tel"> 手 机 号 </1abel> 
id="tel" type="text"/> 


for="pwd" > 密码 </1abe1> 
id="pwd" type="password"/> 


for="verifyCode"> 验 证 码 </1abel> 
id="verifyCode" type="text"/> 
id="submit" type="submit"/> 





验证 码 提交 


图 8-11 表单 对 齐 实例 





在 这 里 我 们 使 用 “overflow:hidden” 来 清除 每 一 个 p 元 素 中 的 浮动 。 浏 
览 右 目 带 的 调试 工具 可 以 很 好 地 帮助 我 们 查看 各 个 盒子 的 长 度 情况 ， 方 
便 我 们 调试 。 对 于 Chrome 浏 览 器 ， 我 们 可 以 使 用 "Ctrl+ShiftrT" 组 合 键 打 
开 调 试 工具 。 而 对 于 Firefox， 我 们 可 以 使 用 Firebug 工 具 来 调试 。 这 个 实 
例 的 CSS 样 式 过 多 ， 但 是 我 们 只 需要 关注 长 度 的 计算 即 可 。 


第 一 行 中 长 度 情况 如 图 8-12 所 示 ，60px 是 左 盒子 的 长 度 
(Cwidth+border+padding) ，250px 是 右 盒子 的 长 度 
(width+border+padding) 。 因 此 在 第 一 行 总 长 度 为 60px+250px+10px = 

320px， 刚 好 等 于 行 宽 320px。 其 中 10px 是 margin 值 。 





手机 号 
: |label 69px x 49px| 
手机 和 号 


[input#tel 250px x 38px| 














图 8-12 第 一 行 长度 分 析 图 


第 三 行 中 的 长 度 情况 如 图 8-13 所 示 ，60px 是 左 盒子 的 长 度 
(widtht+border+padding) ，140px 是 中 间 盒 子 的 长 度 
Cwidth+border+padding) ，100px 是 右 盒子 的 长 度 (width+border+ 

padding) 。 因 此 第 三 行 总 长 度 为 
60px+140px+100px+10px+10px=320px， 刚 好 等 于 行 宽 320px。 其 中 10px 
是 margin 值 。 








验证 租 提交 


! [1abel 60px x 49px 

















验证 码 提交 


|inputsverifyCode 146px > 38px| 








验证 码 提交 


|input#submit 190px x 49pX 











图 8-13 ”第 3 行 长 度 分 析 图 


建议 大 家 在 本 地 编辑 需 中 得 看 本 书 附 带 的 源 代码 ， 并 且 绪 合 浏览 器 
调试 工具 进行 学 习 。 此 外 ， 在 页 面 布局 中 如 果 碰 到 问题 ， 建 议 大 家 多 去 
查看 大 型 网 站 源码 中 的 解决 方案 ， 相 信 你 能 从 中 学 到 很 多 东西 。 





第 9 章 ”和 译 动 布局 


9.1 正常 文档 流 





在 学 习 学 动 布局 和 定位 布局 之 前 ， 我 们 先 来 了 解 “ 正 常 文档 
流 ? 和 “脱离 文档 流 ”"。 了 解 这 两 个 概念 ， 是 深入 学 习 浮 动 布 局 和 定位 布 
局 的 理论 前 提 。 





9.1.1 正常 文档 流 


什么 叫 “ 文 档 流 *? 简单 来 说 ， 就 是 指 元 素 在 页 面 中 出 现 的 先后 顺 
序 。 那 什么 叫 *“ 正 常 文档 流 * 呢 ? 


正常 文档 流 ， 又 称 为 “普通 文档 流 ? 或 “普通 流 ”， 也 就 是 W3C 标 准 所 
说 的 “normal flow”。 我 们 先 来 看 一 下 正 篆 文 档 流 的 简单 定义 :“ 正 各 文 
档 流 ， 将 一 个 页 面 从 上 到 下 分 为 一 行 一 行 ， 其 中 块 元 素 独 占 一 行 ， 相 邻 
行内 元 素 在 每 一 行 中 按照 从 左 到 右 排列 直到 该 行 排 满 。” 也 就 是 说 ， 正 
党 文档 流 指 的 惑 是 默认 情况 下 页 面 元 素 的 布局 情况 。 











举例 : 





< IDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 
<div></div> 
<span></span><span></span> 


<p></p> 
<span></span><i></i> 
<img /> 
<hr /> 

</body> 

</html> 





上 面 HIML 代 码 的 正常 文档 流 如 图 9-1 所 示 。 





图 9-1 HTML 代 码 对 应 的 正常 文档 流 


分 析 : 





由 于 div、p、hr 都 是 块 元 素 ， 因 此 独占 一 行 。 而 span、i、img 都 是 
行内 元 素 ， 因 此 如 果 两 个 行内 元 素 相 邻 ， 就 会 位 于 同一 行 ， 并 且 从 左 到 
右 排 列 ， 如 图 9-2 所 示 。 





图 9-2 正常 文档 流 分 析 图 
9.1.2 ”脱离 文档 流 
脱离 文档 流 ， 指 的 是 脱离 正常 文档 流 。 正 第 文档 流 就 是 我 们 没有 使 


用 浮动 或 者 定位 去 改变 的 默认 情况 下 的 HTML 文 档 结构 。 换 一 句 话 说 ， 
如 果 我 们 想 要 改变 正常 文档 流 ， 可 以 使 用 有 两 种 方法 : 浮动 和 定位 。 


举例 : 





<!DOCTYPE html> 


<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS 浮 动 fl0at 属 性 </title> 
<style type="text/css"> 
/* 定 义 父 元 素 样式 */ 
#father 


width:366pX; 
background-color:#6C6A9D ; 
border:1px solid silver; 


} 
/* 定 义 子 元 素 样式 */ 
#father div 


{ 
padding:16px; 


margin:15px; 
border:2px dashed red; 
background-color:#FCD568; 
} 
</style> 
</head> 
<body> 
<div id="father"> 
<div id="son1">box1</div> 
<div id="son2">box2</div> 
<div id="son3">box3</div> 
</div> 
</body> 
</html> 





在 浏览 器 预 帘 效 果 如 图 9-3 所 示 。 





图 9-3 ”正常 文档 流 效果 


分 析 : 


上 面 定 义 了 三 个 div 元 素 。 对 于 这 个 HTML 来 说 ， 正 稼 文档 流 指 的 就 
是 从 上 到 下 依次 显示 这 三 个 div 元 素 。 由 于 div 是 块 元 素 ， 因 此 每 个 div 元 
素 独占 一 行 。 





设置 浮动 


当 我 们 为 第 二 、 三 个 div 元 素 设 置 左 浮动 时 ， 在 浏览 右 预 览 效 果 如 


图 9-4 所 示 。 





图 9-4 浮动 效果 


正常 文档 流 情 况 下 ，div 是 块 元 素 会 独占 一 行 。 但 是 由 于 设置 了 浮 
动 ， 第 二 、 三 个 div 元 素 却 是 并 列 一 行 ， 并 且 跑 到 父 元 系 之 外 ， 跟 正常 
文档 流 不 一 样 。 也 就 是 说 ， 设 置 浮动 使 得 元 素 脱 离 了 正常 文档 流 。 





2. 设置 定位 








当 我 们 为 第 3 个 div 元 素 设 置 绝 对 定位 的 时 候 ， 在 浏览 器 预览 效果 如 
图 9-5 所 示 。 





图 9-5 ”和 定位 效果 
由 于 设置 了 定位 ， 第 三 个 div 元 素 跑 到 父 元 素 的 上 面 去 了 。 也 就 是 





说 ， 设 置 了 定位 使 得 元 素 脱离 了 文档 流 。 


“正常 文档 流 ? 和 “脱离 文档 流 ” 比 较 抽象 ， 建 议 大 家 结合 一 下 后 面 介 
绍 的 “ 层 登 上下文” 这 一 节 ， 估 计 就 很 容易 理解 了 。 


9.2 深入 浮动 


我 们 都 知道 在 正 稼 文档 流 的 情况 下 ， 块 元 系 都 是 独占 一 行 的 。 如 宋 
想 要 使 得 两 个 或 者 多 个 块 元 系 并 排 在 同一 行 ， 这 个 时 候 可 以 考虑 使 用 浮 
动 ， 将 块 元 素 脱离 正常 文档 流 来 实现 。 


浮动 ， 可 以 使 得 元 素 移 到 左边 或 者 右边 ， 并 且 人 允许 后 面 的 文字 或 元 
素 坏 绕 着 它 。 浮 动 ， 最 第 用 于 实现 水 平方 铝 上 的 并 排 布局 ， 例 如 两 列 布 
局 、 多 列 布局 。 也 就 是 说 ， 如 果 你 想 要 实现 两 列 并 排 或 者 多 列 并 排 效 果 
时 ， 可 以 考虑 浮动 ， 如 图 9-6 所 示 。 浮 动 一 般 用 于 实现 水 平方 回 的 布 
局 ， 而 不 是 垂直 方向 上 的 布局 。 











-De 在 线 调 色 板 zr  W3C 十 六 色 Web 安 全 色 
入 在 线 选取 颜色 值 , 拱 (， W3C 规 定 的 十 六 色 ， VWED 所 有 浏览 器 中 都 支持 
及” 建 席 色 库 . 很 常用 哩 ~ 的 Web 安 全 户 色 
图 9-6 ”多 列 布 局 


float 属 性 很 简单 ， 只 有 三 个 取 值 : left、right 和 none。 但 是 浮动 涉及 
的 理论 知识 却 非常 多 ， 其 中 包括 : 块 元 素 和 行内 元 素 、CSS 盒 子 模型 、 
脱离 文档 流 、BFC、 层 县 上 下 文 。 


对 于 浮动 ， 上 共有 以 下 两 个 最 重要 的 特点 。 


(1) 当 一 个 元 素 定 义 了 “float:left* 或 “float:right” 时 ， 不 管 这 个 元 素 
之 前 是 inline、inline-block 或 者 其 他 类 型 ， 都 会 变 成 block 类 型 。 也 就 是 
说 ， 浮 动 元 素 表 现 为 块 元 素 效 果 ， 可 以 定义 width、height、padding 和 
margin。 这 里 特别 要 注意 一 下 ， 我 们 可 以 使 用 margin-left 或 margin-right 
来 定义 浮动 元 陛 与 其 他 元 兹 之 间 的 间距 。 














举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
span 
{ 
float:1left; 
width:56px; 
height:86px; 


border:1px solid gray 
margin-left:16px; 


} 
</style> 
</head> 
<body> 
<span></span> 
<span></span> 
<Span></spany> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 9-7 所 示 。 


图 9-7 ”浮动 实现 多 列 布局 





分 析 : 





span 本 吴 是 inline 元 素 ， 但 是 设置 了 浮动 之 后 ， 就 变 成 了 块 元 素 ， 并 
且 可 以 设置 width、height 和 margin 等 。 


(2) 当 一 个 元 素 定 义 了 “float:left* 或 “float:right” 时 ， 这 个 元 素 会 脱 
离 文 档 流 ， 后 面 的 元 素 会 紧 跟着 填 上 空 缺 的 位 置 。 


举例 : 


<!DOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 
{ 
width:466pX; 
height:266pX; 
border:1px solid gray 
padding:16pX; 


} 
img{float:1left;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<img src="images/ailianshuo.png” alt=""/> 
<div id="content"> 水 陆 草木 之 花 ， 可 爱 者 其 蕃 。 普 陶渊明 独 爱 菊 。 
</div> 
</body> 
</html> 





在 浏览 占 预 览 效 果 如 图 9-8 所 示 。 










水 陆 草木 之 花 ， 可 爱 者 其 其 。 晋 陶渊明 
独 爱 菊 。 自 李 唐 来 ， 世人 其 爱 牡丹 。 了 
( 绅 爱 莲 之 出 淤泥 而 不 染 ， 涩 清洗 而 不 
烽 ， 中 通 外 直 ， 不 莫不 枝 ， 香 远 益 清 ， 
亭 净 植 ， 可 远 观 而 不 可 区 玩 天。 子 谓 
尖 特 丹 ， , 论 之 富 呈 用 
莲 ， 花 之 君子 者 也 。 踢 ! 菊 之 爱 ， 
ee 秆 十 妆 司 巴 者 何人 ? 牡丹 之 爱 ， 宜 乎 众 













图 9-8 浮动 实现 文字 环绕 


分 析 : 





img 元 系 设 置 了 浮动 ， 后 面 的 p 元 系 的 内 容 会 紧 跟 着 填 上 父 元 系 的 空 
缺 位 置 。 


9.3 浮动 的 影 啊 

这 一 节 给 大 家 介绍 一 下 元 素 在 设置 了 浮动 之 后 带 来 的 影响 ， 以 便 让 
大 家 更 加 深刻 地 理解 浮动 。 

(1) 对 自身 的 影响 。 

(2) 对 父 元 素 的 影响 。 

(3) 对 兄弟 元 素 的 影响 。 

(4) 对 子 元 素 的 影响 。 


9.3.1 对 上 自身 的 影响 


如 果 一 个 元 素 设 置 了 浮动 ， 则 不 管 这 个 元 素 是 什么 类 型 ， 都 会 转化 
为 块 元 素 ， 也 就 是 display 属 性 值 为 block。 








举例 : 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<title></title> 
<style type="text/css"> 
strong 
{ 
float:1left; 
width:126px; 
height:68px; 
line-height:66px; 
border:1px solid gray; 
text-align:center; 
} 
</style> 


</head> 


<body> 
<strong> 绿 叶 学 习 网 </ strong> 

</body> 

</html> 





在 浏览 器 预览 效果 如 图 9-9 所 示 。 





绿叶 学 习 网 











图 9-9 ”浮动 对 自身 的 影响 


分 析 : 





strong 元 素 是 inline 元 素 ， 但 是 在 设置 了 浮动 之 后 变 成 了 块 元 素 ， 并 
且 可 以 设置 width、height、padding 和 margin。 


9.3.2 ”对 父 元 素 影 响 


如 宁 一 个 元 系 设 置 了 译 动 ， 它 会 脱离 正 各 文档 访 。 如 有 果 浮 动 元 素 的 
高 度 height 大 于 父 元 素 的 高 度 height， 或 者 父 元 素 没有 定义 高 度 height， 
此 时 浮动 元 素 会 脱离 父 元 系 。 这 束 是 我 们 常见 的 “ 父 元 素 局 上 度 坊 陷 ”。 

造成 父 元 素 局 上 度 塌 陷 的 原因 在 于 ， 父 元 素 的 高 有 度 小 于 子 元 素 的 局 
度 ， 或 者 父 元 素 没有 定义 高 度 ， 父 元 素 不 能 把 子 元 素 包 于 起 来 。 说 白 
了 ， 束 是 老区 管 不 住 儿 子 ， 因 此 儿子 离 家 出 走 了 。 























举例 : 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title></title> 


<style type="text/css"> 
#wrapper 


width:260px; 
border: 1px solid black; 
} 


#first,#second 


width:86px; 
height:46px; 
border:1px solid red; 


#first{float:left;} 
#second{float:right;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first"></div> 
<div id="second"></div> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 9-10 所 示 。 


一 


图 9-10 ”浮动 对 父 元 素 的 影响 





分 析 : 








在 这 个 例子 中 ， 由 于 父 元 素 没 有 定义 高 度 ， 因 此 父 元 素 无 法 把 子 元 
素 包 于 起 来 ， 就 会 造成 父 元 素 高 度 塌陷 。 

如 果 我 们 为 父 元 素 定 义 高 度 ， 但 是 这 个 高 度 小 于 子 元 素 局 度 《〈 例 如 
height:20pX) ， 在 浏览 占 预 筑 效 果 如 图 9-11 所 示 。 此 时 我 们 会 发 现 ， 父 
元 系 无 法 把 子 元 系 包 里 起 来 ， 仍 然 有 父 元 素 高 度 塌陷 问题 。 























如 条 我 们 为 父 元 素 定 义 遍 度 ， 但 是 这 个 高 度 大 于 子 元素 局 度 《〈 例 如 
height:60px) ， 在 浏览 右 预 览 效 果 如 图 9-12 所 示 。 此 时 我 们 会 发 现 ， 父 
元 素 把 子 元 素 包 右 起 来 ， 因 此 不 会 有 父 元 对 高 度 塌 陷 问 题 。 


二 


图 9-11 设置 父 元 素 小 于 子 元 素 高 度 


= | 


图 9-12 设置 父 元 素 高 度 大 于 子 元 素 
9.3.3 ”对 兄 第 元 素 的 影响 
1. 兄弟 元 素 是 浮动 元 素 





























当 一 个 浮动 元 系 ， 它 的 兄弟 元 素 也 是 浮动 元 素 时 ， 我 们 分 两 种 情况 
来 探讨 :QD 同一 方向 的 兄弟 元 素 ; 相反 方向 的 兄弟 元 素 。 


(1) 同一 方 辐 的 兄 第 元 素 。 


当 一 个 浮动 元 系 磁 到 同一 个 方 辐 的 兄 第 元 素 时 ， 这 些 元 系 会 从 左 到 
右 、 从 上 到 下 ， 一 个 接 独 一 个 紧 换 着 排列 。 





举例 ; 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
body{text-align:center;} 
#main 


text-align:1left; 
display:inline-block; 
padding:12px; 
border:1px dashed gray; 


} 

#wrapper 

{ 
width:246px; 
height:26px; 
border:1px solid black; 

} 

#first,，#second 

{ 
float:1left; 
width:66pX; 
height:66px; 
border:1px solid gray 
margin-top:16px; 
margin-Jleft:16px; 
margin-right:16pX; 
background-color: #F4F6F4; 

} 

</style> 
</head> 


<body> 
<div id="main"> 
<div id="wrapper"> 
<div id="first">1</div> 
<div id="second">2</div> 
</div> 
</divy> 
</body> 
</html> 





在 浏览 絮 预 换 效 果 如 图 9-13 所 示 。 
时 -2 | 


图 9-13 ”同一 方向 的 兄弟 元 素 《〈 左 浮动 ) 


分 析 : 


当 这 两 个 div 元 素 同 时 设置 为 右 浮动 时 ， 在 浏览 器 预 宽 效 果 如 图 9-14 
所 示 。 





图 9-14 ”同一 方向 的 兄弟 元 素 《〈 右 浮动 ) 





(2) 相反 方 同 的 兄 第 元 系 。 


当 一 个 浮动 元 系 磁 到 同一 个 方 辐 的 兄 第 元 素 时 ， 这 两 个 元 素 会 移 问 
两 边 〈 如 果 父 元 素 宽 度 足 够 的 话 )。 


举例 : 





<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 


{ 


width:246px; 

height:28px; 

border:1px solid black; 
} 


#first,，#second 


width:66px; 
height:66px; 
border:1px solid gray 
margin-top:16px; 
margin-left:16px; 
margin-right:16px; 


background-color: #F4F6F4; 
} 
#first{float:left;} 
#second{float:right;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first">1</div> 
<div id="second">2</div> 


</div> 
</body> 
</html> 





在 浏览 絮 预 览 效 果 如 图 9-15 所 示 。 


图 9-15 不 同方 向 的 兄弟 元 素 





2. 兄弟 元 素 不 是 浮动 元 素 


举例 : 





<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 


{ 


width:260px; 
height:156pX; 
border:1px solid red ; 
} 
/* 第 一 个 div 设 置 浮动 */ 
#first 
{ 





width:86pX; 
height:86px; 
border:1px solid gray 
float:1left; 
background-color:#F4F6F4; 
} 
/* 第 二 、 三 个 div 没 有 设置 浮动 */ 
#second,#third 
{ 





width:160px; 
height:36px; 
border:1px solid gray 
} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first">1</div> 
<div id="second">2</div> 
<div id="third">3</div> 


</div> 
</body> 
</html> 





在 浏览 占 预 览 效 果 如 图 9-16 所 示 。 














图 9-16 ” 兄 第 元 素 不 是 浮动 时 效果 








在 这 个 例子 中 ， 第 一 个 div 设 置 了 浮动 ， 第 二 、 三 个 div 没 有 设置 浮 


一 一 和 


动 。 此 时 可 以 看 出 ， 第 一 个 div 脱 离 了 文档 沉 ， 并 且 和 窗 盖 了 第 二 、 三 这 


两 个 div。 


当 我 们 也 为 第 二 、 三 个 div 设 置 浮动 (float:left) 之 后 ， 在 浏览 器 预 
览 效 果 如 图 9-17 所 示 。 此 时 可 以 看 出 ， 第 一 个 div 不 再 履 盖 第 二 、 三 个 


div。 











图 9-17 兄弟 元 素 是 浮动 时 效果 











从 上 面 这 个 例子 可 以 看 出 ， 浮 动 的 影响 很 奇 范 ， 对 布局 影响 很 大 。 
0 尽量 清除 浮动 ， 不 然 会 有 预想 
“到 的 后 果 。 


9.3.4 对 子 元 素 的 影响 


从 “浮动 元 素 对 其 父 元 素 的 影响 ”我 们 知道 ， 如 果 父 元 素 没有 定义 高 

度 height， 此 时 浮动 元 素 会 脱离 父 元 素 ， 造 成 父 元 素 高 度 塌 陷 。 但 是 当 

人 这 个 父 元 素 会 自 适 应 地 包含 该 子 
元 素 

















也 就 是 说 ， 如 果 一 个 元 素 是 浮动 元 素 ( 没 有 定义 height) ， 并 且 它 
的 子 元 素 也 是 浮动 元 素 ， 则 这 个 浮动 元 素 会 自 适 应 地 包含 该 子 元 素 。 











准 例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title></title> 


<style type="text/css"> 
#wrapper 
{ 
width:260px; 
border: 1px solid black; 


} 

#first,#second 

{ 
width:86px; 
height:46px; 
border:1px solid red; 

} 


#first{float:left;} 
#second{float:right;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first"></div> 
<div id="second"></div> 
</div> 
</body> 
</html> 





在 浏览 占 预 览 效 果 如 图 9-18 所 示 。 


Lo 


图 9-18 ” 父 元 素 没 有 设置 浮动 


在 这 个 例子 中 ， 如 果 我 们 给 父 元 素 定 义 “float:left”* 或 
者 “float:right”， 在 浏览 器 预览 效果 如 图 9-19 所 示 。 


[| 


图 9-19 ” 父 元 素 设 置 浮 动 





9.4 浮动 的 负 作 用 


浮动 可 以 让 我 们 灵活 地 布局 ， 但 是 也 会 融 来 一 定 的 负 作用 。 浮 动 珊 
来 的 最 常见 的 负 作用 有 两 个 。 


(1) 父 元 素 高 度 塌陷 ， 从 而 导致 边框 不 能 撑 开 ， 背 景色 无 法 显 








钞 。 


(2) 页 面 布局 错乱 。 


举例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<title></title> 
<style type="text/css"> 
#wrapper 
width:260px; 
border:1px solid black; 
background-color:#51DCFF; 
} 
#first,#second 
{ 
width:86pX; 
height:46px; 
border:1px Solid red; 
} 


#first{float:left;} 
#second{float:right;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first"></div> 
<div id="second"></div> 
</div> 


</body> 
</html> 


在 浏览 器 预览 效果 如 图 9-20 所 示 。 


i 


图 9-20 ”浮动 的 负 作 用 


分 析 : 











在 这 个 例子 中 ， 由 于 父 元 素 没 有 定义 高 度 ， 因 此 父 元 素 无 法 把 子 元 
素 包 庄 起 来 ， 就 会 造成 父 元 素 高 度 塌 陷 ， 从 而 导致 父 元 素 边 框 不 能 撑 开 
并 且 背 景色 无 法 显示 。 当 我 们 为 父 元 素 添 加 “overflow:hidden” 来 清除 浮 
动 之 后 ， 边 框 能 够 撑 开 了 并 且 背 景色 也 能 显示 出 来 ， 预 览 效 果 如 图 9-21 


所 示 。 


图 9-21 清除 浮动 后 效果 











< 人 





“1!DOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 


width:266pX; 
height:156pX; 
border:1px solid red; 


/* 第 一 个 div 设 置 浮动 */ 
#first 
{ 





width:86px; 
height:86px; 
border:1px solid gray 
float:1left; 
background-color:#F4F6F4; 
} 
/* 第 二 、 三 个 div 没 有 设置 浮动 */ 
#second,#third 
{ 





width:160px; 
height:36px; 
border:1px solid gray 
} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first">1</div> 
<div id="second">2</div> 
<div id="third">3</div> 
</divy> 
</body> 
</html> 























图 9-22 浮动 引起 的 布局 错乱 


在 这 个 例子 中 ， 第 一 个 div 设 置 了 浮动 ， 第 二 、 三 个 div 没 有 设置 浮 
动 。 此 时 可 以 看 出 ， 第 一 个 div 脱 离 了 文档 流 ， 并 且 覆 六 了 第 二 、 三 这 
两 个 div， 引 起 了 布局 的 错乱 。 


给 大 家 一 个 很 实用 的 建议 : 在 实际 开发 的 过 程 中 ， 如 果 我 们 因为 写 
了 某 段 CSS 之 后 ， 突 然 发 现 页 面 布 局 错乱 十 分 严重 ， 此 时 我 们 首先 应 该 
想到 的 是 浮动 带 来 的 负 作 用 ， 然 后 认真 检查 一 下 是 否 没 有 清除 浮动 。 








9.5 ”清除 浮动 





清除 浮动 ， 其 实 就 是 清除 元 素 被 定义 浮动 之 后 带 来 的 脱离 文档 流 的 
影响 。 我 们 知道 ， 浮 动 可 以 使 得 元 系 移 到 左边 或 者 右边 ， 然 后 后 面 的 文 
字 或 元 素 会 环绕 着 这 个 浮动 元 系 。 如 果 我 们 不 想 浮 动 元 素 后 面 的 元 素 坏 

绕 看 它 ， 而 是 希望 后 面 的 元 素 回 归 到 正和 常 文档 流 时 候 的 布局 ， 这 个 时 候 
我 们 可 以 使 用 清除 浮动 来 实现 。 


所 谓 的 清除 浮动 ， 束 是 强制 去 除 元 系 浮 动 之 后 市 来 的 影响 (这 些 影 
啊 在 前 面 有 过 详细 的 介绍 ，， 然 后 使 得 其 他 元 系 痢 回归 到 正常 文档 流 。 


在 CSS 中 ， 常 见 的 清除 浮动 的 方法 有 三 种 。 


(1) clear:both 。 

















(2) overflow:hidden 。 
) ::after 伪 元 素 。 
9.5.1 clear:both 


在 CSS 中 ， 我 们 可 以 使 用 clear 属 性 来 清除 浮动 。clear 属 性 取 值 有 三 
种 : left、right 和 both。 一 般 情 况 下 ， 我 们 果断 使 用 “clear:both” 来 清除 所 
有 浮动 ， 非 党 省 事 。 


这 里 注意 一 点 ，clear 属 性 不 是 应 用 于 浮动 元 素 本 里， 而 是 应 用 于 浮 
动 元 素 后 面 的 元 素 。 














< 给 例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<title></title> 


<style type="text/css"> 
#wrapper 
{ 
width:260px; 
border: 1px solid black; 


} 

#first,#second 

{ 
width:86px; 
height:46px; 
border:1px solid red; 

} 


#first{float:left;} 
#second{float:right;} 
.Clear 


{ 


} 
</style> 
</head> 
<body> 
<div id="main"> 
<div id="wrapper"> 
<div id="first"></div> 
<div id="second"></div> 
<div class="clear"></div> 
</div> 
</div> 
</body> 
</html> 


clear:both; /* 关 键 代码 ， 清 除 浮动 */ 





在 浏览 右 预 览 效 果 如 图 9-23 所 示 。 


Ni i i 


图 9-23 ”使 用 “clear:both” 清 除 浮动 





为 了 清除 元 素 的 浮动 ， 往 往 会 添加 一 个 div 标 签 。 很 多 时 候 这 个 div 





标签 仅仅 是 为 了 清除 浮动 而 添加 的 ， 没 有 任何 其 他 意义 。 这 种 是 很 多 新 
手 清除 浮动 的 做 法 ， 但 是 这 个 方法 破坏 了 HTML 代 码 的 语义 ， 如 果 页 面 
要 清除 多 次 浮动 ， 这 样 就 无 缘 无 故 添加 了 很 多 多 余 的 div 标 签 。 


9.5.2 overflow:hidden 
在 CSS 中 ， 我 们 可 以 使 用 "overflow:hidden” 来 清除 浮动 。 这 里 要 注 


意 一 点 , “overflow:hidden" 应 用 于 浮动 元 素 的 父 元 素 ， 而 不 是 当前 的 浮 
动 元 素 。 








举例 ; 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 











<head> 
<title></title> 
<style type="text/css"> 
#wrapper 
overflow:hidden; /* 关 键 代码 ， 清 除 浮动 */ 
width:260px; 
border:1px solid black; 
#first,#second 
{ 
width:86pX; 
height:46px; 
border:1px solid red; 
} 


#first{float:left;} 
#second{float:right;} 
</style> 
</head> 
<body> 
<div id="main"> 
<div id="wrapper"> 
<div id="first"></div> 
<div id="second"></div> 
</div> 
</divy> 


</body> 
</html> 


在 浏览 絮 预 览 效 果 如 图 9-24 所 示 。 


| 


图 9-24 ”使 用 “overflow:hidden” 清 除 浮 动 











分 析 : 


免 添 加 了 多 余 的 标签 ， 并 且 不 会 破坏 HTML 的 语义 结构 。 不 
过 “overflow:hidden” 是 个 小 炸弹 ， 它 会 隐藏 超出 父 元 素 的 内 容 部 分 ， 
时 候 这 并 不 是 我 们 预期 的 效果 。 


使 用 “overflow:hidden” 清 除 浮 动 相对 “clear:both” 清 除 浮 动 来 说 ， 避 
有 


9.5.3 ”::after 伪 元 素 
使 用 “clear:both” 和 “overflow:hidden”* 来 清除 浮动 都 有 明显 的 次 端 。 


在 实际 开发 中 ， 比 较 好 的 解决 方案 是 使 用 “::after 伪 元 素 ” 结 
合 “clear:both” 来 实现 。 


语法 : 


.Clearfix{*zoom:1;} 
.Clearfix: :after 


{ 


clear :both; 
content:""; 
display:block; 
height:6; 
visibility:hidden; 





说 明 : 


::after 伪 元 素 结 合 “clear:both” 来 清除 浮动 的 方式 ， 我 们 推荐 用 来 定 
义 成 公共 类 【如 类 名 为 dearfix) ， 然 后 进行 全 局 引用 ， 以 便 减 少 CSS 代 
但 。 





其 中 ::after 是 伪 元 素 ， 在 CSS3 的 动画 效果 中 使 用 比较 多 。::before 
和 ::after 都 是 常用 的 伪 元 素 ， 建 议 大 家 自行 了 解 一 下 ， 此 处 不 展开 介 
绍 。“*zoom:1;” 用 于 解决 I[E6、IE7 浮 动 问题 。 


举例 : 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
.Clearfix{*zoom:1;} 
.Clearfix: :after 


{ 
clear:both ; 
Conten 七 :””; 
display:block; 
height:0@; 
visibility:hidden; 

} 

#wrapper 

{ 
width:268px; 
border:1px solid black; 

} 

#first,#second 


width:86px; 
height:46px; 
border:1px solid red; 


#first{float:left;} 
#second{float:right;} 


</style> 
</head> 
<body> 
<div id="wrapper" class="clearfix"> 
<div id="first"></div> 
<div id="second"></div> 


</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 9-25 所 示 。 


Ne si) 


图 9-25 “::after 伪 元 素 "清除 浮动 


分 析 : 





“clear:both” 清 除 浮动 会 增加 多 余 标 签 ，“overflow:hidden” 清 除 浮 动 
会 使 得 超出 父 元 素 部 分 隐藏 。 但 是 使 用 ::after 伪 元 素来 清除 浮动 ， 都 不 
会 有 这 些 缺 点 。 在 实际 开发 中 ， 我 们 也 更 倾向 于 使 用 这 种 方法 。 


浮动 涉及 的 理论 知识 非常 多 ， 其 中 包括 : 块 元 系 和 行内 元 系 、CSS 
盒 丁 模型、 脱离 文档 流 、BFC、 层 登 上 下 文 。 建 议 大 家 一 定 要 结合 一 
后 面 介绍 的 “BFC” 和 “ 层 生 上下文 ”这 两 个 ， 会 对 浮动 有 更 深刻 的 理解 。 











第 10 章 ”定位 布局 


10.1 深入 定位 

浮动 和 定位 是 CSS 两 大 布局 方式 。 浮 动 布局 比较 灵活 ， 但 不 容易 控 
制 。 定 位 布局 虽然 缺乏 灵活 性 ， 但 是 却 可 以 让 用 户 精 准 地 定位 页 面 中 元 
素 的 位 置 。 在 CSS 中 ， 定 位 布局 共有 四 种 方式 。 


(1) 固定 定位 (fixed) 。 





(2) 相对 定位 (relative) 。 

(3) 绝对 定位 (absolute) 。 

(4) 静态 定位 〈static) 。 

对 于 定位 布局 ， 我 们 需要 注意 以 下 几 点 。 

(1) 默认 情况 下 ， 固 定 定 位 元 素 和 绝对 定位 元 素 的 位 置 是 相对 于 
浏览 器 而 言 ， 而 相对 定位 元 素 的 位 置 是 相对 原始 位 置 而 言 。 这 里 注意 一 
个 前 提 一 一 默认 情况 下 。 


(2) position 属 性 一 般配 合 top、bottom、left 和 right 来 使 用 。 只 有 元 
素 定 义 position 属 性 (除了 static) 之 后 ，top、bottom、left 和 right 才 生 


效 。 








(3) top、bottom、left 和 right 这 四 个 属性 不 一 定 全 部 都 用 到 。 


04) “position:absolute” 会 将 元 素 转换 为 块 元 素 。 


10.1.1 子 元 素 相对 父 元 素 定 位 





在 入 门 阶 段 ， 我 们 都 知道 痢 定 位 往往 都 十 相 对 于 浏览 部 或 者 原始 位 置 
而 言 的 。 但 是 在 实际 开发 中 ， 我 们 经 常 要 实现 子 元 素 相对 于 父 元 素来 定 
位 ， 那 该 怎么 办 呢 ? 








百 法 : 


父 元 素 {position:relative;} 
子 元 素 
{ 


position:absolute; 
/* 定 义 top、bottom、left 和 right*/ 





说 明 : 





想 要 实现 子 元 素 相 对 父 元 素 定 位 ， 我 们 都 是 给 父 元 素 定 
义 “position:relative;”， 然 后 给 子 元 素 定义 “position:absolute;”， 之 后 配合 
top、bottom、left 和 right 来 定位 。 这 个 技巧 在 实际 开发 中 大 量 使 用 ， 它 
也 是 定位 布局 的 精髓 之 一 ， 大 家 一 定 要 重点 掌握 。 





举例 : 





<!DOCTYPE htm]> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
.father 
{ 


position:relative; 
width:166pX; 
height:36px; 


background-color:#O6OFFFF ; 


position:absolute; 
bottom: -36pX; 
right:65px; 
width:36pX; 
height:36px; 
background-color:red; 
} 
</style> 
</head> 
<body> 
<div class="father"> 
<div class="son"></div> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 10-1 所 示 。 





图 10-1 子 元 素 相对 父 元 素 定 位 (1) 


分 析 : 


使 用 上 面 这 个 技巧 ， ,我 们 可 以 把 子 元 素 随 心 所 欲 地 相对 父 元 素来 定 
位 。 在 这 里 我 们 注意 一 点 ， inline-block”， 但 是 
却 可 1 为 什么 ? 这 这 契 因 
为 “position: Me a 这 是 绝对 定位 非常 重要 的 
一 个 特点 。 接 下 来 ， 我 们 再 来 看 一 个 复杂 的 例子 。 











举例 ; 


<“!DOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
body{float:1left;} 
.father 
{ 
position:relative; 
width:126pX; 
height:36pX; 
background-color :#606FFFF; 


position:absolute; 
bottom: -20pX; 
right:56pX; 
width:26pX; 
height:26px; 
background-color :red ; 


} 
</style> 
</head> 
<body> 
<div class="father"> 
<div class="son"></div> 
</div> 
<div class="father"> 
<div class="son"></div> 
</div> 
<div class="father"> 
<div class="son"></div> 
</div> 
</body> 
</html> 





图 10-2” 子 元 素 相 对 父 元 素 定 位 (2) 


分 析 : 


子 元 素 相 对 父 元 素 定 位 用 途 非常 多 ， 例 如 二 级 导航 、 微 调 元 素 位 置 
等 。 像 绿叶 学 习 官 网 导航 中 的 三 角形 效果 ， 其 实 也 是 使 用 子 元 素 相对 父 
元 素 定 位 来 实现 的 ， 如 图 10-3 所 示 。 


EL 


常用 下 载 绿叶 论坛 





图 10-3 绿叶 学 习 网 中 的 绝对 定位 
10.1.2 子 元 素 相 对 祖先 元 素 定 位 


上 面 这 两 个 例子 部 是 子 元 系 相 对 父 元 素来 定位 的 ， 但 是 有 些 时 候 我 
们 想 要 实现 子 元 系 相 对 祖先 元 素 〔 例 如 祖父 元 素 ) ， 那 怎么 办 呢 ? 














语法 : 


祖先 元 素 {position:relative;} 
子 元 素 
{ 


position:absolute; 
/* 定 义 top、bottom、1left 和 和 right*/ 
} 





说 明 : 





想 要 实现 子 元 素 相 对 祖先 元 素 定 位 ， 我 们 都 是 给 祖先 元 素 定 
义 “position:relative;”*”， 然 后 给 子 元 素 定义 “position:absolute;”， 之 后 配合 
top、bottom、left 和 right 来 定位 。 这 与 子 元 素 相对 于 父 元 素 定 位 是 一 样 
的 道理 。 








举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
.grandfather 
{ 
position:relative;  //* 设 置 相 对 定位 */ 
width:268px; 
height :166pX; 
background-color:blue; 





} 
.father 


{ 
position:relative;  /* 设 置 相 对 定位 */ 
width:126px; 
height:36px; 
background-color :#OOFFFF ; 





position:absolute; /* 设 置 绝对 定位 */ 
bottom: -20px; 

Fight:56pX; 

width:26pX; 

height :26pX; 

background-color:red; 











} 
</style> 
</head> 
<body> 
<div class="grandfather"> 
<div class="father"> 
<div class="son"></div> 
</div> 
</div> 
</body> 
</html> 





车 
器 
沪 
法 


效果 如 图 10-4 所 示 。 





图 10-4 ”实际 效果 图 





图 10-5 “预期 效果 图 


分 析 : 


小 伙伴 们 可 能 就 有 疑问 了 : 奇怪 了 ， 为 什么 这 里 的 子 元 系 不 是 相对 
祖父 元 素来 进行 定位 的 ， 而 还 是 相对 于 父 元 素来 进行 定位 呢 ? 预 期 的 效 
果 应 该 像 图 10-5 这 样 啊 。 


这 是 因为 祖父 元 素 定 义 了 “position:relative;” 的 同时 ， 父 元 素 也 定义 
了 “position:relative;”， 因 此 子 元 素 依旧 是 相对 于 父 元 素来 定位 的 。 我 们 
在 CSS 中 删除 父 元 素 “position:relative;” 这 条 属性 之 后 ， 就 可 以 发 现 子 元 
素 会 相对 于 祖父 元 素来 定位 了 。 


绝对 定位 元 素 是 相对 于 外 层 第 一 个 设置 
了 “position:relative;”position:absolute;” 或 “position:fixed” 的 祖先 元 素来 进 
行 定 位 的 。 这 个 规律 极其 重要 ， 大 家 请 好 好 琢磨 这 句 话 。 

















此 外 ， 关 于 定位 布局 的 基本 语法 不 在 本 书 详细 展开 ， 具 体内 容 请 查 
看 《web 前 端 开 发 精品 课 HTML 和 CSS 基 础 教程 》 相 关 章 节 。 


10.2 z-index 属性 








里 然 网 页 是 平面 的 ， 但 实际 上 网 页 是 三 维 结构 ， 除 了 x 轴 、y 轴 ， 它 
还 有 z 轴 。z 轴 往往 都 是 用 来 设 定 层 的 先后 顺序 的 。 


在 CSS 中 ， 我 们 可 以 使 用 z-index 属性 来 控制 z 轴 的 大 小 ， 从 而 控制 
元 素 的 堆 闭 顺序 ， 如 图 10-6 和 图 10-7 所 示 。 也 就 是 说 ， 我 们 可 以 使 用 z- 
index 属 性 将 一 个 元 素 放 置 于 另外 一 个 元 素 的 下 面 。 


默认 情况 下 ， 元 素 的 z-index 属 性 处 于 不 激活 状态 。 也 就 是 说 默认 情 
况 下 ， 设 置 元 素 的 z-index 属性 无 效 。z-index 属 性 只 有 在 元 素 定 
义 “position:relative”position:absolute 或 者 “position:fixed” 时 才 会 被 激活 。 
当然 ， 对 于 “position:fixed” 的 z-index 也 没什么 值得 去 管 ， 直 接 忽 略 即 
EE 











div3 一 Z-index:3 
div2 一 Z-index:2 


» divl — z-index:1 








图 10-6 ”z-index 原理 图 (1) 





z-index:1 


z-index:2 


z-index:3 





图 10-7 z-index 原理 图 (2) 


合演 


说 明 : 





z-index 属性 取 值 如 表 10-1 所 示 。 


表 10-1 z-index 取 值 


默认 值 ， 堆 县 顺 序 与 父 元 素 相等 








Co es Dt 下 
规定 应 该 从 父 元 素 继承 z-index 属性 的 值 


W3C 标 准 中 对 CSS 的 z-index 属性 是 这 样 定 义 的 :“z-index 属 性 设置 

















元 素 的 堆 合 顺序 ， 拥 有 更 高 堆 合 顺序 的 元 素 总 是 会 处 于 堆 僵 顺序 较 低 的 
元 素 的 前 面 。 该 属性 设置 一 个 定位 元 素 沿 z 轴 的 位 置 ，z 轴 定义 为 垂直 延 
Le 


默认 情况 下 ， 元 素 z-index 属 性 值 为 auto。z-index 值 为 正 数 的 元 素 在 
z-index 值 为 0 的 上 面 ，z-index 值 为 负数 的 元 素 在 z-index 值 为 0 的 下 面 。 无 
论 是 正 数 还 是 负数 ，z-index 值 较 大 的 元 素 会 登 加 在 z-index 值 较 小 的 元 素 
如 果 z-index 值 相同 ， 则 遵循 “后 来 者 届 上 ”规则 来 登 加 ， 如 图 10-8 

示 : 


此 外 要 记 住 一 点 ， 如 果 元 素 没 有 指定 position 属 性 值 〈 除 了 























static) ， 则 z-index 属 性 无 效 。 





一 Z-index 层 级 关系 





图 10-8 ”z-index 层级 关系 


举例 : 





<!DOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 


{ 


width:166pX; 
height:166pX; 
font-size:50pXj 
position:absolute; 
} 
#A{background-color:red;top:16px; left:106px;} 
#B{background-color:orange; top:46px; left:46px;} 
#C{background-color:blue;top:76px; left:706px;} 
</style> 
</head> 
<body> 


<div id="A">A</div> 
<div id="B">B</div> 
<div id="C">C</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 10-9 所 示 。 





图 10-9 没有 设置 z-index 时 效果 


分 析 : 


在 这 个 例子 中 <div id="A">A</div>、<div id="B">B</div> 和 <div 
id="C">C</div> 在 HTML 文档 中 从 上 到 下 显示 ， 因 此 在 浏览 器 看 到 的 效 
果 为 : A 容器 在 最 下 和 面 ，B 在 中 间 ，C 在 最 上 面 。 假 如 给 A 容器 加 上 “z- 
index:3”， 给 B 容 器 加 上 “z-index:2”， 给 C 容 器 加 上 “z-index:1”， 在 浏览 右 
预览 效果 如 图 10-10 所 示 。A、B、C 三 个 div 元 素 z-index 属性 值 分 别 是 3、 
2、1， 根 据 z-index 值 大 小 来 排列 顺序 。 








图 10-10 ”设置 z-index 时 效果 


这 一 节 只 是 简单 介绍 一 下 z-index 属性 的 基本 语法 。 实 际 上 z-index 属 
性 涉及 的 东西 很 多 ， 例 如 层 登 上 下 文 。 对 于 层 登 上 下 文 ， 我 们 在 后 面 章 


市 会 详细 介绍 。 


第 11 章 ”CSS 图 形 


11.1 CSS 图 形 简 介 


在 浏览 网 页 的 过 程 中 ， 我 们 经 常 看 到 各 种 图 形 效果 ， 如 图 11-1 至 图 
11-3 所 示 。 对 于 这 些 图 形 效 果 ， 小 伙伴 们 更 多 时 候 想 到 的 是 用 图 片 来 实 
现 。 但 是 在 前 并 开发 中 ， 为 了 网 站 的 性 能 速度 ， 我 们 都 是 秉 着 “ 少 用 图 
片 ” 的 原则 。 因 为 图 片 实现 有 两 个 很 明显 的 缺点 : 一 是 图 片 大 小 比较 
大 ， 数 据 传 输 量 大 ， 二 是 一 张 图 片 会 引用 一 次 HITP 请 求 。 这 两 个 方面 
都 会 影响 页 面 加 载 速度 ， 并 且 增 加 服务 器 人 负担。 试想 一 下 ， 作 为 用 户 ， 
如 果 打 开 一 个 网 页 延迟 时 间 过 长 ， 你 是 怎样 的 心情 ? 








长 度 为 6~14 个 字符 
支持 数字 .大 小 写字 母 和 标点 符号 
不 允许 有 空格 


图 11-1 网 页 中 的 三 角形 


| 在 绪 滑 色 板 








图 11-2 ”网 页 中 的 圆 角 





Javascript 


图 11-3 ”网 页 中 的 圆 


在 实际 开发 中 ， 对 于 这 些 图 形 效果 ， 我 们 更 倾向 于 使 用 CSS 而 非 图 
片 来 实现 。 在 这 一 章 里 ， 我 们 主要 介绍 以 下 三 种 图 形 的 CSS 实 现 方式 。 


(1 三 角形 。 
圆 角 与 圆 。 
(3) 顶 圆 。 














We 


(2 


以 上 三 种 图 形 的 实现 是 在 CSS 中 最 沼 见 的 。 除 了 这 些 图 形 ， 像 多 边 
形 这 种 比较 少见 ， 因 此 在 这 一 半 束 不 展开 介绍 了 。 不 过 使 用 CSS 可 以 实 
现 各 种 多 边 形 效果 ， 例 如 梯形 、 五 角 星 、 钻 石 等 ， 还 是 挺 有 趣 的 ， 我 们 
可 以 自行 搜索 了 解 一 下 。 


CSS 实 现 的 图 形 一 般 适 合 于 展示 ， 并 不 适合 用 于 JavaScript 动 态 操 
作 。 如 果 想 要 实现 便于 JavaScript 操 作 的 图 形 ， 大 家 可 以 去 了 解 canvas 或 
SVG。 这 两 个 可 以 实现 各 种 酪 炫 的 动态 图 形 效 果 ， 例 如 粒子 人 碰撞、 动感 
(如 图 11-4 所 示 ) 等。 

















图 11-4 canvas 实现 的 动感 圆圈 


11.2 三 角形 


三 角形 在 很 多 地 方 都 能 见 到 ， 如 下 拉 菜 单 、 表 单 注册 、 用 户 消息 
等 。 图 11-5 至 图 11-7 这 些 三 角形 ， 都 是 使 用 CSS 而 并 非 图 片 来 实现 的 。 
居然 可 以 用 CSS 来 实现 三 角形 ， 同 学 们 是 不 是 觉得 很 神奇 ? 当初 我 接触 
的 时 候 ， 心 情 跟 你 们 是 一 样 的 激动 。 











消息 设置 > 
搜索 设置 
高 级 搜索 
关闭 预测 
搜索 历史 





图 11-5 下拉 菜单 中 的 三 角形 


长 度 为 6~14 个 字符 
支持 数字 ,大 小 写字 母 和 标点 符号 
不 允许 有 空格 


图 11-6 表单 注册 中 的 三 角形 





亲爱 的 中 国 移动 用 户 ， 您 好 ， 您 的 手机 余额 已 不 20 元 


图 11-7 用户 消息 中 的 三 角形 
11.2.1 CSS 实现 三 角形 的 原理 


在 CSS 盒 子 模型 中 ， 当 一 个 盒子 的 两 条 边 在 边 角 处 相交 时 ， 浏 览 器 
就 会 在 交点 处 按照 某 个 角度 〈 如 果 盒 子 为 正方 形 ， 则 为 顺 时 针 45?、 
135°*、225°*、315°) 绘制 一 条 接合 线 。 我 们 先 来 看 一 个 例子 ， 更 容易 理 
解 些 。 


举例 : 


< IDOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#box 
{ 
width:36px; 
height:36px; 
border-width:26pX; 
border-style:solid; 
border-color:red green blue orange; 
} 
</style> 
</head> 
<body> 
<div id="box"></div> 
</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 11-8 所 示 。 


图 11-8 ”width 和 height 不 为 0 的 盒子 效果 


分 析 : 





在 这 个 例子 中 ， 我 们 为 每 一 条 边框 定义 不 同 的 颜色 (border- 
color) ， 并 且 设 置 足够 大 的 宽度 (border-width) ， 然 后 可 以 很 明显 地 
看 出 两 条 边 相 交 时 的 效果 ， 如 果 我 们 把 盒子 的 宽度 (width) 和 高 上 度 
Cheight) 都 定义 为 0 时 ， 会 得 出 图 11-9 所 示 的 效果 。 


图 11-9 width 和 height 都 为 0 的 盒子 效果 

我 们 都 知道 ，border-color 属 性 包含 四 个 值 ， 分 别 对 应 < 上 、 碳 、 
条 
! 
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下 、 左 ?四 条 边 颜 色 ， 呈 顺 时 针 排 列 。 如 果 将 “ 右 、 下 、 左 ”这 三 条 边 颜 
色 改 为 ransparent〈 透 明 ) 会 发 生 什 么 昵 《〈 实 际 代码 如 下 ) ? 哇 ! 这 个 
时 候 呈 现 了 一 个 指 同 下 方 的 三 角形 ， 如 图 11-10 所 示 。 


<style type="text/css"> 
#box 
{ 


border-width:28px; 
border-style:solid; 
border-color:red transparent transparent transparent; 


} 
</style> 





本 
图 11-10 “ 右 、 下 、 左 "这 三 条 边 颜 色 改 为 transparent 时 的 效果 


广 
当然 我 们 也 可 以 定义 “下 、 左 ?两 条 边 颜色 为 transparent， 这 会 实 民 
一 个 指 同 右上 方 的 三 角形 ， 如 图 11-11 所 示 。 








<style type="text/css"> 
#box 


{ 
border-width:28px; 


border-style:solid; 
border-color:red red transparent transparent; 





</style> 


从 上 面 我 们 可 以 总 结 出 使 用 CSS 来 实现 三 角形 的 原理 : 将 一 个 元 素 
的 width 和 height 定 义 为 0， 然 后 为 它 设 置 较 粗 的 边框 ， 并 且 将 其 中 任意 
三 条 边框 或 者 两 条 边 的 颜色 定义 为 transparent。 


、 








图 11-11 将 * 下 、 左 ?这 两 条 边 的 颜色 改 为 transparent 的 效果 
注意 ， 上 面 例子 中 所 有 边框 的 border-width 都 是 相同 的 ， 我 们 可 以 


通过 定义 不 同 的 border-width 来 改变 三 角形 的 形状 ， 如 图 11-12 所 示 。 使 
用 CSS 实 现 三 角形 的 原理 都 是 相同 的 。 我 们 可 以 思考 一 下 以 下 这 些 三 角 


形 是 如 何 实现 的 。 
vv 全 4 
A 


图 11-12 ” CSS 实现 的 三 角形 效果 
11.2.2 ” 带 边框 的 三 角形 
在 实际 开发 中 ， 我 们 经 常 要 实现 如 图 11-13 所 示 的 “ 带 边 框 的 三 角 


形 ”。 由 于 三 角形 本 身 就 是 border， 我 们 不 可 能 通过 给 border 添 加 border 
属性 来 实现 。 





支持 数字 ,大 小 写字 母 和 标点 符号 
不 允许 有 空格 


图 11-13” 带 边框 的 三 角形 


对 于 这 种 带 边 框 的 三 角形 ， 我 们 一 般 使 用 两 个 三 角形 来 实现 。 一 个 
作为 背景 色 (内 层 三 角形 〉， 一 个 作为 边框 色 ( 外 层 三 角形 ) ， 然 后 通 
过 定位 布局 重 晤 在 一 起 。 注 意 ， 两 个 三 角形 定位 要 相 莽 1 像 系 。 一 般 情 
况 下 ， 都 古 将 内 层 三 角形 相对 于 外 层 三 角形 进行 定位 ， 仿 移 1 像素 。 


在 实现 带 边 框 的 三 角形 原理 中 ， 有 一 个 关于 绝对 定位 的 问题 是 一 定 
不 可 忽视 的 :上 、 右 、 下 、 左 四 个 方向 三 角形 相对 于 父 元 素 定 位 是 不 同 
的 。 必 须 把 这 个 问题 理解 清楚 ， 我 们 才能 深刻 理解 带 边 框 三 角形 的 实现 
原理 ， 














举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
/* 外 层 三 角形 */ 
#triangle 
{ 








position:relative; /* 设 置 position:relative， 使 子 元 素 可 以 相对 父 元 素 
width:0; 

height:0@; 

border-width:36px;j /* 注 意外 层 三 角形 高 为 386px*/ 

border-style:solid; 

border-color:transparent transparent black transparent; 











} 
/* 内 层 三 角形 */ 
#triangle div 
{ 





position:absolute; 

top:1px; 

left:0; 

width:0; 

height:0; 

border-width:29px;/* 注 意 内 层 三 角形 边 高 为 29px*/ 
border-style:solid; 

border-color:transparent transparent #BBFFEE transparent; 




















} 
</style> 
</head> 
<body> 
<div id="triangle"> 
<div></div> 
</div> 
</body> 
</html> 





在 浏览 絮 预 览 效 呆 如 图 11-14 所 示 。 


全 


图 11-14” 带 边框 三 角形 实际 效果 


外 层 三 角形 高 为 30px， 内 层 三 角形 高 为 29px。 按 道理 说 ， 如 果 内 层 
三 角形 top 定 义 为 1px (向 下 移动 lpx) ，left 定 义 为 0 时 ， 预 览 效果 应 该 如 
图 11-15 所 示 ， 但 为 什么 跟 预 期 效果 不 一 样 呢 ? 


其 实在 CSS 中 ， 子 元 素 的 绝对 定位 是 根据 父 元 素 的 “内 容 边 界 
(content) ”进行 定位 的 。 也 就 是 说 , “内 层 三 角形 对 应 的 盒子 ”的 绝对 
定位 是 根据 “外 层 三 角形 对 应 的 盒子 ”的 内 容 边 界 content 来 进行 定位 的 ， 
而 不 是 根据 我 们 肉眼 所 看 到 的 三 角形 的 边界 来 进行 定位 的 ， 如 图 11-16 
所 示 。 由 于 盒子 width 和 height 都 是 0， 因 此 content 是 在 盒子 的 中 心 (也 
就 是 中 心 点 ) 。 


























全 


图 11-15” 带 边框 三 角形 预期 效果 


pu < 





图 11-16 “” 带 边框 三 角形 分 析 图 














如 果 想 要 实现 图 11-14 的 效果 ，top 应 该 为 -28px，left 应 该 为 -29px。 
对 于 上 面 提 太 的 绝对 定位 的 原理 ， 我 们 多 结合 盒子 模型 来 理解 就 很 容易 
了 





举例 : 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 


<title></title> 
<style type="text/css"> 
#wrapper 


{ 


} 
/* 外 层 三 角形 */ 


display:inline-block; 
position:relative; 
padding:26pXx 36pX; 
margin-top:106px 
border:1px solid gray 
border-radius:16px;/* 添 加 
font-size:14px; 
font-weight:bold; 
text-align:center; 
background-color:#BBFFEE; 











效果 */ 








a 
a 











#triangle 


{ 


} 


position:absolute; 

top :-36pX ; 

/*left:56% 和 margin-left:-15px 是 为 了 实现 三 角形 的 水 平 居中 */ 
left:508%; 

margin-left:-15px; 

width:0; 

height:0@; 

border-width:15px; 

border-style:solid; 

border-color:transparent transparent black transparent; 














/* 内 层 三 角形 */ 
#triangle div 


{ 


} 








position:absolute; 

top:-13px; 

left:-14px; 

width:0; 

height:0@; 

border-width:14px; 

border-style:solid; 

border-color:transparent transparent #BBFFEE transparent; 


</style> 


</head> 
<body> 


<div id="wrapper"> 
<div id="triangle"><div></div></div> 


欢迎 来 到 绿叶 学 习 网 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 11-17 所 示 。 





欢迎 来 到 绿叶 学 习 网 


图 11-17 带 边 框 三 角形 应 用 


分 析 : 


上 面 例子 的 CSS 代 码 有 点 多 ， 但 是 核心 代码 只 有 那么 一 皮 反 。 要 想 
实现 对 话 气泡 效 打 ， 我 们 需要 进行 两 次 定位 : 一 次 是 将 外 层 三 角形 和 内 
层 三 角形 作为 一 个 整体 相对 于 容器 进行 定位 ， 男 外 一 次 是 将 内 层 三 角形 
相对 于 外 层 三 角形 进行 定位 。 


一 般 情况 下 ， 外 层 三 角形 border-width 比 内 层 三 角形 borderwidth 大 
1px。 此 外 ， 外 层 三 角形 的 left 值 一 般 都 是 其 border-wdith 的 负数 ，top 值 
一 般 都 是 其 border-width 的 负数 加 1。 例 如 在 上 面 这 个 例子 中 ， 外 层 三 角 
形 border-wdith 为 14px， 则 left 应 该 定义 为 -14px，top 应 该 定义 为 -13px。 








11.3 


我 们 在 很 多 网 站 ， 包 括 绿 时 学 习 网 ， 都 经 常 能 看 到 各 种 圆 角 效果 ， 
如 图 11-18 和 图 11-19 所 示 。 圆 角 效 果 往 往 更 为 美观 大 方 ， 用 户 体 验 也 更 
好 。 


图 11-18 圆 角 按钮 








图 11-19 圆 角 图 标 
11.3.1 CSS 实现 圆 角 
在 CSS2.1 中 ， 给 元 素 添加 圆 角 效 果 是 一 件 很 头疼 的 事情 。 老 办 法 都 


是 使 用 背景 图 片 来 实现 ， 制 作 起 来 比较 厅 烦 。CSS3 中 border-radius 属 性 
的 出 现 ， 使 得 圆 角 效果 的 实现 得 到 完美 的 解决 。 





1. border-radius 属 性 
在 CSS 中 ， 对 于 圆 角 效果 我 们 都 是 使 用 CSS3 的 border-radius 属 性 来 
实现 。 


语法 : 


border-radius :长 度 值 ; 





说 明 : 
长 度 值 可 以 是 px、 百 分 比 、em 等 。 


举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS3 border-radius 属 性 </title> 
<style type="text/css"> 
div 


{ 








width:166px; 
height:56px; 


border:1px solid gray; 
border-radius:16px; 


} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 网 11-20 所 示 。 


图 11-20 “border-radius 属 性 简单 实例 





“border-radius:10px;” 指 的 是 元 系 四 个 角 的 圆 角 半径 都 是 10px。 
2. border-radius 属 性 值 的 四 种 写法 


border-radius 属 性 跟 border、padding、margin 等 属性 相似 ， 其 属性 值 
也 有 四 种 写法 。 


(1) border-radius 设 置 一 个 值 。 


例如 “border-radius:10px;” 表 示 四 个 角 的 圆 角 半 径 都 是 10px， 如 图 11- 
21 所 示 。 


(2) border-radius 设 置 两 个 值 。 


例如 “border-radius:10px 20px;” 表 示 左 上 角 和 右 下 角 的 圆 角 半径 是 
10px， 右 上 角 和 左下 角 的 圆 角 半径 都 是 20px， 如 图 11-22 所 示 。 


图 11-21 border-radius 设 置 一 个 值 











图 11-22 ”border-radius 设 置 两 个 值 











(3) border-radius 设 置 三 个 值 。 


例如 “border-radius:10px 20px 30px;” 表 示 左 上 角 圆 角 半 径 是 10px， 
左下 角 和 右上 角 的 圆 角 半径 都 是 20px， 右 下 角 圆 角 半 径 是 30px， 如 图 
11-13 上 所 示 。 


(4) border-radius 设 置 四 个 值 。 


例如 “border-radius:10px 20px 30px 40px;” 表 示 左 上 角 、 右 上 角 、 碳 
下 角 和 左下 角 的 圆 角 半径 依次 是 10px、20px、30px、40px， 如 图 11-14 
所 示 。 


图 11-23 border-radius 设 置 三 个 值 











图 11-24 border-radius 设 置 四 个 值 


这 里 的 “左上 角 、 右 上 角 、 右 下 角 、 左 下 角 ”， 大 家 按照 顺 时 针 方 回 
记忆 就 好 了 。 














举例 : 





<“!DOCTYPE html> 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS3 border-radius 属 性 </title> 
<style type="text/css"> 
div 
{ 
width:260px; 
height:166pX; 
border:1px solid red ; 
border-radius:16px 26pX 36px 46pX 
background-color:#FCE9B8; 





} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 11-25 所 示 。 


图 11-25 ”border-radius 实 例 (2) 
过 
分 析 : 


大 家 可 以 自行 在 本 地 编辑 器 中 为 border-radius 属 性 设置 不 同 值 ， 然 
后 查看 实际 效果 如 何 。 

在 实际 开发 中 ，border-radius 属 性 一 般 都 是 设置 一 个 值 ， 使 得 四 个 
圆 角 效 果 都 一 样 。 四 个 圆 角 都 搞 得 不 一 样 ， 有 必要 这 么 花哨 么 ? 当然 有 
啊 ， 像 下 面 这 种 效果 就 是 这 么 花哨 。 对 于 图 11-26 所 示 ， 关 键 是 实现 标 
签 前 面 的 圆 形 效果 。 


全 洒 动 结束 , 感谢 参与 


帘 目前 发 过 的 活动 地 址 包括 : 北京 、 西 安 、 沈 阳 、 深 圳 和 海南 。 


图 11-26 


举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS3 border-radius 属 性 </title> 
<style type="text/css"> 
div 


{ 








width:56px; 
line-height:56px; 
border-radius:86% 96% 166% 208%; 


background-color:#E61588; 
font-size:38px; 
text-align:center; 
color :White 
} 
</style> 
</head> 
<body> 
<div>6</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 11-27 所 示 。 


图 11-27 ”border-radius 实 例 (3) 





11.3.2 CSS 实现 半圆 和 圆 
1. 半圆 
半圆 分 为 : 上 半圆 、 下 半圆 、 左 半圆 、 右 半圆 。 我 们 只 要 学 会 制作 


0 的 半圆 ， 其 他 方 癌 的 半圆 都 可 以 轻松 实现 ， 因 为 原理 是 一 样 








假如 我 们 要 制作 上 半圆 ， 实 现 原 理 : 把 高 度 height 设 为 宽度 width 的 
一 半 ， 并 且 左 上 角 和 右上 角 的 圆 角 半径 定义 与 元 素 的 高 度 一 致 ， 而 右 下 
角 和 左下 角 的 圆 角 半径 定义 为 0。 








< 人 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS3 border-radius 属 性 </title> 
<style type="text/css"> 
div 


{ 





width:166pX; 
height:58px; 


border:1px solid red; 
border-radius:166px 166px 8 0; 
background-color:#FCE9B8; 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 11-28 所 示 。 


全 、\ 


图 11-28 ”使 用 border-radius 实 现 半 




















在 这 个 例子 中 ，border-radius 属 性 值 等 于 圆 角 的 半径 。 大 家 结合 一 
下 圆 和 和 矩形 的 数学 知识 ， 稍 微 想 一 想 就 知道 上 半圆 如 何 实现 了 。 


此 外 ， 请 大 家 根据 上 面 的 原理 自行 测试 一 下 下 半圆 、 左 半圆 以 及 右 
半圆 是 如 何 实现 的 。 








在 CSS3 中 ， 圆 的 实现 原理 如 下 : 元 素 的 宽度 和 高 度 定义 为 相同 
值 ， 然 后 四 个 角 的 圆 角 半径 定义 为 宽度 《或 高 度 ) 的 一 半 。 





举例 : 


<!DOCTYPE htm]> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>CSS 实 现 圆 </title> 
<style type="text/css"> 
div 


{ 





width:160px; 
height:166pX; 
border:1px solid red; 
border-radius:506px; 


background-color:#FCE9B8; 


} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 





在 这 个 例子 中 ，width 和 height 属 性 值 相同 ，border-radius 属 性 值 为 
width 〈 或 height) 的 一 半 ， 然 后 就 可 以 实现 一 个 圆 了 ， 如 图 11-29 所 示 。 





图 11-29 ”使 用 border-radius 
实现 


border-radius 属 性 很 强大 ， 如 图 11-30 所 示 的 哆 啦 A 梦 其 实 就 是 用 


border-radius 结 合 其 他 CSS 属 性 来 实现 的 ， 很 神奇 吧 ? 我 们 可 以 自己 尝试 
制作 一 下 《本 书 附 有 源码 ) 。 








图 11-30 ”使 用 border-radius 实 现 哆 啦 A 梦 
11.3.3” border-radius 派 生子 属性 


border-radius 属 性 可 以 分 开 ， 分 别 为 四 个 角 设 置 相 应 的 圆 角 值 ， 这 
四 个 角 的 属性 如 下 。 


(1) border-top-right-radius: 右上 角 。 








(2) border-bottom-right-radius: 右 下 角 。 


(3) border-bottom-left-radius: 左下 角 。 


(4) border-top-left-radius: 左上 角 。 


11.4” 樟 圆 


在 CSS 中 ， 我 们 也 是 使 用 border-radius 属 性 来 实现 椭圆 的 。 
证 


说 明 : 





X 表 示 圆 角 的 水 平 半 径 ，y 表 示 圆 角 的 垂直 半径 。 从 之 前 的 学 习 中 我 
们 知道 ，border-radius 属 性 取 值 可 以 是 一 个 值 ， 也 可 以 是 两 个 值 。 


当 border-radius 属 性 取 值 为 一 个 值 时 ， 例 如 “border-radius:30px”， 表 
示 圆 角 水 平 半 径 和 垂直 半径 为 30px， 也 就 是 说 “border-radius:30px” 等 价 
于 “border-radius:30px/30px”， 前 者 是 后 者 的 缩写 ， 效 果 如 图 11-31 所 示 。 


em 


30p 
\30px 1 





图 11-31 “border-radius:30px” 分 析 图 


当 border-radius 属 性 取 值 为 两 个 值 时 ， 例 如 “border- 
radius:20px/40px”， 表 示 圆 角 的 水 平 半径 为 20px， 牌 直 半 径 为 40px， 效 
果 如 图 11-32 所 示 。 





图 11-32 “border-radius:20px/40px” 分 析 图 








如 果 想 要 实现 椭圆 ， 原 理 如 下 : 元 素 的 宽度 和 高 度 不 相等 


有 二? 


个 角 的 圆 角 水 平 半 径 定义 为 宽度 的 一 半 ， 垂 直 半径 定义 为 高 度 的 
举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 
{ 
width:166px; 
height:166pX; 


border:1px solid gray 
border-radius:86px/506px; 


} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


在 浏览 器 预览 效果 如 图 11-33 所 示 。 


其 中 四 
一 性 





图 11-33 ”使 用 border-radius 实 现 椭 
AN 
分 析 : 


用 CSS 实 现 椭圆 在 实际 开发 中 也 比较 常见 。 此 外 ， 我 们 可 以 党 试 使 
用 border-radius 属 性 来 实现 如 图 11-34 所 示 各 种 图 形 效 果 ， 以 便 加 深 理 
解 。 


Sse 


图 11-34 ”使 用 border-radius 实 现 各 种 图 形 效 果 


第 12 章 ”性 能 优化 


12.1 CSS 优化 简介 


编写 局 质量 的 CSS 代 码 主要 体现 在 2 个 方面 : 可 读 性 和 可 维护 性 和 
高 性 能 。 对 于 一 名 前 端 工 程 师 来 说 ， 如 何平 衡 “ 追 求 高 性 能 ”和 “可 维护 
性 ”是 一 个 很 值得 思考 的 问题 。 

对 于 流量 比较 少 的 普通 网 站 来 说 ，CSS 本 身 的 性 能 并 不 突出 。 
此 ， 提 高 CSS 代 码 的 可 读 性 和 可 维护 性 相对 性 能 来 说 更 重要 一 些 。 一 般 
情况 下 ， 我 们 部 是 在 确保 CSS 可 读 性 和 可 维护 性 的 前 提 下 ， 再 去 考虑 它 
J 度 。 但 是 对 于 大 型 网 站 ， 如 淘宝 ， 改 善 性 能 是 非常 其 有 实际 意 


人 中 ， 我 们 从 以 下 八 个 方面 来 介绍 一 下 CSS 性 能 优化 中 的 各 
种 技巧 。 


(1) 属性 缩写 。 
(2) 语法 压缩 。 
(3) 图 片 压缩 。 
(4) 选择 器 优化 。 
(5) CSS 模块 化 。 
(6) 压缩 工具 。 











(7) CSS Sprite 技 术 。 


(8) 性 能 评估 。 


CSS 文 件 比较 小 ， 性 能 提高 也 是 微乎其微 。 因 此 可 能 会 有 人 
说 : “我 们 如 此 细致 地 去 优化 CSS 性 能 ， 意 义 并 不 大 啊 。” 大 多 数 情 况 下 
的 确 如 此 。 但 是 当 我 们 大 规模 地 使 用 CSS， 文 件 变 得 非常 大 ， 并 且 页 面 
每 天 都 会 有 几 百 万 甚至 上 千 万 次 的 访问 时 ， 这 种 小 小 的 性 能 提升 就 大 不 
同 了 。 对 于 一 个 流量 比较 少 的 小 网 站 来 说 ，CSS 再 怎么 优化 也 提高 不 了 
多 少 性 能 。 但 是 对 于 一 个 高 流量 的 网 站 ， 如 淘宝 、 百 度 等 来 说 ，CSS 性 
能 速度 哪怕 有 一 丁点 提高 也 是 非常 有 用 的 。 























有 研究 表明 ，Amazon.com 每 增加 10 毫 秒 的 页 面 加 载 时 间 会 导致 销 
售 额 下 降 1%， 而 谷歌 搜索 结果 显示 ， 加 载 时 间 每 增加 500 毫 秒 将 导致 收 
入 减少 20%。 我 们 可 以 看 到 性 能 的 提高 对 于 大 型 网 站 是 多 么 重要 了 。 哪 
怕 所 做 的 优化 能 够 提高 1 毫秒 的 速度 ， 也 是 相当 有 价值 的 。 事 实 上 ， 互 
联网 大 公司 在 性 能 考虑 方面 是 非常 细致 而 全 面 的 。 


此 外 ， 这 些 性 能 优化 技能 也 是 “真正 前 端 工程 师 ” 和 “野生 网 页 设计 
师 ” 重 要 分 水 岭 之 一 。 新 手 和 高 手写 出 来 的 代码 ， 一 眼 束 能 够 看 出 来 。 
因此 对 于 这 一 半 的 优化 技巧 ， 希望 大 家 重点 掌握 。 








12.2 ”属性 缩写 








在 CSS 中 ， 很 多 属性 是 可 以 缩写 的 。 属 性 缩写 可 以 减少 字符 数 ， 使 
得 CSS 代 码 量 更 少 。 对 于 属性 缩写 ， 我 们 主要 从 四 个 方面 进行 优化 。 


盒 模型 缩写 。 


(2) 背景 缩写 。 


We 


(1 


(3) 字体 缩写 。 
(4) 颜色 值 缩写 。 


12.2.1 盒 模型 缩写 





在 CSS 盒 子 模型 中 ， 有 3 个 重要 属性 : border、padding 和 margin， 如 
表 12-1 所 示 。 


表 12-1 CSS 盒子 模型 属性 





Lier 














1. 边框 border 


对 于 边框 ， 我 们 需要 定义 3 个 方面 : 边框 的 宽度 (border-width) ， 
边框 的 外 观 〈border-style) ， 边 框 的 颜色 (border-color) 。 


对 于 边框 ， 有 2 种 写法 : 完整 形式 和 缩写 形式 。 
(1) 完整 形式 


border-width:1px; 


border-style:solid; 
border-color:Red; 





(2) 缩写 形式 


ae。 
be。 


border:1px solid red 


在 实际 开发 中 ， 我 们 推荐 使 用 border 属 缩写 方式 。“border:1px 
solid red” 定 义 的 是 四 条 边 样式 ， 如 果 只 想 定 义 一 条 边 样式 ， 可 以 使 
用 “border- -top:1px solid red” 这 种 方式 。 有 站 我 们 只 想 定义 三 条 边 的 
边框 ， 可 以 采用 以 下 方法 。 





2. 内 边 距 padding 


padding 写 法 有 三 种 ， 分 别 如 下 


padding: 长 度 值 ; 


padding: 长 度 值 1 长 度 值 2; 
padding :长 度 值 1 长 度 值 2 长 度 值 3 长 度 值 4; 











例如 : “padding:20px;” 表 示 四 个 方 回 的 内 边 距 都 是 20px。 


“padding:20px 40px;” 表 示 padding-top 和 padding-bottom 为 20px， 
padding-right 和 padding-left 为 40px。 “padding:20px 40px 60px 80px;” 表 示 
padding-top 为 20px，padding-right 为 40px，padding-bott om 为 60px， 
padding-left 为 80px。 大 家 按照 顺 时 针 方 癌 记 忆 束 可 以 了 ， 如 图 12-1 所 
示 。 





padding:20px 40px 60pxX 80pX 





( 顺 时 针 方 向 ) 





图 12-1 padding 简 洁 写 法 分 析 
3. 外 边 距 margin 


margin 写 法 跟 padding 写 法 相似 ， 也 有 3 种 ， 分 别 如 下 。 











例如 : “margin:20px;” 表 示 四 个 方 癌 的 外 边 距 都 是 20px。 


“margin:20px 40px;” 表 示 margin-top 和 margin-bottom 为 20px，margin- 
right 和 margin-left 为 40px。“margin:20px 40px 60px 80px;” 表 示 margin-top 
为 20px，margin-right 为 40px，margin-bottom 为 60px，margin-left 为 
80px。 大 家 按照 顺 时 针 方 网 记忆 就 可 以 了 ， 如 图 12-2 所 示 。 











margin:20pX 40pX 60pX 80pX; 
( 顺 时 针 方 向 ) 





图 12-2 margin 简洁 写法 分 析 
对 于 border、padding 和 margin， 要 注意 这 几 个 属性 的 缩写 方式 是 针 
对 几 个 方 同 的 ， 如 果 单 独 一 个 方 回 束 没 必要 使 用 缩写 形式 ， 不 然 它 连 其 
他 不 需要 的 方向 也 定义 了 数值 ， 会 影响 预期 效 采 。 


12.2.2 ”背景 缩写 








在 CSS 中 ， 为 元 素 定义 背景 ， 往 往 涉及 表 12-2 所 示 属 性 。 


表 12-2 CSS 背景 属性 























background-position 背景 图 片 的 定位 





对 于 背景 ， 有 两 种 写法 ， 完 整形 式 和 简写 形式 。 
完整 形式 


background-image:url("images/flower.jpg" ); 


background-repeat:no-repeat; 
background-position:86px 46px; 





2; 癌 写 形 翅 
在 实际 开发 中 ， 我 们 推荐 使 用 简写 形式 。 
12.2.3 ”字体 缩写 
在 CSS 中 ， 常 用 到 的 字体 以 及 文本 属性 如 表 12-3 所 示 。 


表 12-3 CSS 字 体 属 性 








font-family 字体 类 型 


对 于 背景 ， 有 两 种 写法 : 完整 形式 和 简写 形式 。 





完整 形式 


font-family:" 微 软 雅 黑 "; 
font-size:12px; 


font-weight:bold 
line-height:1.5em; 





2， 人 简写 形式 





font: "微软 雅 黑 " 12px/1.5em bold; 








对 于 字体 简写 形式 ， 需 要 注意 以 下 两 点 。 


1) 如 果 使 用 字体 简写 形式 ， 我 们 至 少 要 指定 font-family 和 font- 
size 属 性 ， 其 他 属性 如 采 没 有 指定 则 将 自动 使 用 默认 值 。 


(2) 在 简写 形式 中 ，font-size 值 和 ]ine-height 值 之 间 是 需要 加 入 和 斜 
杜 “/* 的 。 初 学 者 要 特别 注意 一 下 这 种 写法 ， 在 实际 开发 中 会 经 常见 到 。 


12.2.4 闫 色 值 缩写 


在 CSS 中 ， 十 六 进 制 的 颜色 值 是 可 以 缩写 的 。 如 果 每 两 位 的 值 相 
同 ， 可 以 缩写 一 半 。 例 如 “color:#000000” 可 以 缩写 
为 “color:#000”，“color:#336699” 可 以 缩写 为 “color:#369”。 当 然 在 实际 开 
发 中 ， 我 们 不 采用 缩写 形式 也 没 多 大 影响 。 之 所 以 讲解 ， 也 是 为 了 让 大 
家 知道 有 这 种 缩写 形式 ， 以 免 看 不 懂 别 人 写 的 代码 。 
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在 CSS 中 ， 很 多 语法 格式 其 实 只 是 为 了 方便 我 们 阅读 ， 这 些 语法 格 
式 并 不 一 定 必须 要 使 用 。 如 果 我 们 对 于 一 些 语法 进行 精简 压缩 ， 则 可 以 
减少 CSS 文 件 大 小 ， 从 而 减少 页 面 数 据 传输 量 。 

对 于 语法 压缩 ， 我 们 从 以 下 7 个 方面 进行 优化 。 

(1) 空白 符 。 


(27 站 属 分 号 5 





(3) ur0 的 引号 。 

(4) 属性 值 为 “0”。 

(5) 属性 值 为 “以 0 开头 的 小 数 ”。 
(6) 合并 相同 的 定义 。 

(7) 利用 继承 进行 合并 。 


12.3.1 空白 符 





一 般 情况 下 ， 多 个 属性 值 之 间 才 必须 要 用 空格 。 在 CSS 中 ， 空 格 和 
换行 往往 都 是 为 了 方便 代码 的 阅读 。 


代码 一 ( 纵 同 书写 ) 





#wrapper 


padding:16pX; 
border:1px solid gray 
} 


#content 


font-size:14px; 
text-indent:2em; 


} 





代码 二 《〈 横 癌 书 写 ) : 





#wrapper{padding:16px;border:1px solid gray;}#content{font-size:14px;text-i 


对 于 浏览 器 来 说 ， 上 面 两 种 书写 方式 是 完全 等 价 的 。 其 中 纵 癌 书写 
代码 方便 阅读 ， 模 癌 书 写 则 可 以 节省 不 少 字 符 数 。 但 是 在 实际 开发 中 ， 
我 们 建议 使 用 纵向 书写 ， 不 建议 使 用 横向 书写 。 然 后 等 到 整 站 发 布 的 时 
候 ， 再 使 用 工具 压缩 成 模 同 书写 方式 。 当 然 ， 如 果 在 实际 开 肥 中 ， 革 一 
个 CSS 规 则 只 有 一 两 个 属性 的 时 候 ， 使 用 横向 书写 更 为 妥当 。 





12.3.2 结 属 分 号 


在 CSS 中 ， 每 一 个 选择 器 的 样式 都 是 用 大 括号 {} 括 起 来 。 实 际 上 ， 
最 后 一 个 属性 之 后 的 结尾 分 号 是 不 必要 的 。 省 上 略 之 后 ， 对 代码 没有 任何 


影响 。 





#wrapper 


padding:16pX; 
border:1px solid gray 


} 





代 但 二 : 


#wrapper 


{ 


padding:16px; 
border:1px solid gray 
} 





对 于 浏览 器 来 说 ， 上 面 两 段 代 码 是 等 价 的 。 省 略 最 后 一 个 分 号 可 以 
让 每 一 个 规则 减少 一 个 字符 。 


12.3.3 url 的 引号 
在 CSS 中 ， 像 background-image、cursor 等 属性 url0 中 的 路 径 不 需要 
添加 引号 。 


background-image:url("logo.jpg"); 
cursor:url("default.cur"),default; 


background-image:url(logo.jpg); 
cursor:url(default.cur), default; 





对 于 浏览 器 来 说 ， 上 面 两 段 代码 是 等 价 的。 省 略 引号 可 以 让 规则 减 
少 两 个 字符 。 


12.3.4 属性 值 为 0 


在 CSS 中 ， 如 采 共 一 个 属性 取信 为 0， 则 这 个 属性 值 不 需要 添加 音 


位 。 


.test 
{ 


font-size:QOpx; 
padding:Qem; 


.test 

{ 
font-size:0; 
padding:0@; 

} 





对 于 浏览 器 来 说 ， 上 面 两 段 代 码 是 等 价 的 。 
12.3.5 ”属性 值 为 以 0 开头 的 小 数 


在 CSS 中 ， 当 一 个 属性 的 属性 值 是 以 0 开头 的 小 数 时 ， 我 们 可 以 把 
开头 的 0 去 掉 。 


.test 
{ 
font-size:0.5em; 


.test 
{ 


font-size:.5em; 





} 


对 于 浏览 器 来 说 ， 上 面 两 段 代 码 是 等 价 的 。 但 是 在 实际 开发 中 ， 不 
建议 使 用 第 二 种 方式 ， 因 为 这 种 方式 可 读 性 比较 差 。 不 过 ， 在 整 站 发 布 
之 前 ， 我 们 可 以 使 用 压缩 工具 来 执行 这 个 去 掉 0 的 操作 。 


12.3.6 合并 相同 的 定义 
在 CSS 中 ， 很 多 时 候 定 义 的 规则 会 有 相同 的 部 分 ， 我 们 可 以 使 用 群 


I 








.article 

{ 
font-size:14px; 
line-height:14px; 
text-indent:2em; 
background-color:#F1F1F1; 
border:1px solid silver; 


.COLumn 

{ 
font-size:14px; 
line-height:14px; 
text-indent:2em; 
background-color:orange; 


} 
代码 二 : 


.article, .column 

{ 
font-size:14px; 
line-height:14px; 
text-indent:2em; 
border:1px solid silver; 


.article{background-color:#F1F1F1;} 
.Column{background-color:orange;} 








代码 三 中 使 用 群 组 选择 器 合并 了 两 个 不 同 规则 之 间 的 相同 部 分 。 这 
样 一 来 ， 以 后 只 要 修改 群 组 选择 器 中 的 CSS 样 式 ， 就 可 以 同时 修改 两 个 
class 的 样式 ， 非 常 利 于 代码 的 维护 。 
12.3.7 利用 继承 进行 合并 

在 CSS 中 ， 很 多 属性 是 可 以 继承 的 。 


(1) 文本 相关 属性 : font-family、font-size、font-style、font- 
weight、 font、line-height、text-align、text-indent、word-spacing。 








(2) 列表 相关 属性 : list-style-image、list-style-position、 list-style- 
type、 list-style。 


(3) 颜色 相关 属性 : color。 


如 果 父 元 素 的 多 个 子 元 系 痢 定义 了 相同 的 可 继承 属性 ， 我 们 可 以 把 
这 些 相同 的 属性 定义 在 父 元 素 上 ， 从 而 精简 代码 。 





<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#content 


{ 


font-size:14px; 
font-weight:bold; 
line-height:14px; 
color:Red; 
background-color:Orange; 


} 


#sidebar 

{ 
font-size:14px; 
font-weight:bold; 
line-height:14px; 
color:Red; 
background-color:#F1F1F1; 


} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="content"></div> 
<div id="sidebar"></div> 
</div> 
</body> 
</html> 





代码 二 : 





“<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 


{ 


font-size:12px; 
font-weight:bold; 


line-height:14px; 
color:Red; 


#content{background-color:Orange;} 
#sidebar{background-color:#F1F1F1;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="content"></div> 
<div id="sidebar"></div> 
</div> 
</body> 
</html> 





代码 二 利用 CSS 属 性 的 继承 性 ， 避 免 了 代码 的 重复 ， 精 简 了 代码 。 


12.4 压缩 工具 


在 前 儿 市 中 我 们 学 习 了 各 种 CSS 的 压缩 技巧 ， 这 些 对 于 我 们 深入 了 
解 CSS 性 能 优化 是 很 有 帮助 的 。 我 们 都 知道 CSS 文 件 分 为 “ 开 友 版 ?和 “发 
na 发 布 版 是 将 开发 版 进行 合并 和 压缩 之 后 ， 在 网 站 运行 时 使 用 


那么 问题 来 了 ， 在 网 站 发 布 的 时 候 如 果 我 们 要 压缩 CSS 文 件 ， 是 不 
是 要 逐 项 手动 删除 空白 符 、 删 除 结尾 分 写 、 删 除 属性 值 为 0 的 单位 昵 ? 
说 实话 ， 如 果 现 实 是 如 此 残酷 的 话 , “程序 狼 ” 这 种 生物 估计 离 绝种 不 远 
了 。 为 了 保护 “程序 猿 ”* 这 种 宝贵 生物 ， 前 端 界 为 我 们 提供 了 一 大 生存 利 
器 一 CSS 压缩 工具 ! 


CSS 压 织 工 具有 在 线 版 、 本 地 版 和 编辑 器 插件 三 种 ， 这 里 推荐 使 用 
在 线 版 的 两 个 工具 : CSS Compressor 和 YUI Compressor。 





CSS Compressor 网 址 : http://www.csscompressor.com 
YUI Compressor 网 址 : http://tool.oschina.net/jscompress 


拿 YUI Compressor 来 说 ，YUI Compressor 会 自动 对 CSS 文 件 执行 如 
下 操作 。 


(1) 删除 所 有 注释 。 

(2) 删除 无 用 的 空白 符 。 

(3) 删除 结尾 分 号 。 

(4) 删除 属性 值 为 0 的 单位 。 

(5) 删除 属性 值 以 0 开头 的 小 数 前 的 0。 

(6) 将 相似 属性 合并 ， 例 如 margin、padding、background 等 。 
(7) 将 RGB 颜色 转换 为 十 六 进 制 颜色 。 


从 上 面 可 以 看 出 ，YUI Compressor 真 的 为 我 们 提供 了 一 条 龙 服务 
呐 。 只 需要 轻 轻 一 键 压缩 ， 你 就 可 以 高 枕 无 忧 了 。 想 要 了 解 YUI 
Compressor 更 多 信息 ， 大 家 上 自行 搜索 一 下 。 


很 多 人 会 有 一 个 疑问 : 是 不 是 有 了 CSS 压 缩 工具 ， 平 党 我 们 就 不 需 
要 注意 代码 的 书写 了 呢 ?” 其 实在 实际 开发 中 ， 还 是 建议 大 家 养 成 民 好 的 
优化 习惯 ,然后 再 使 用 压缩 工具 进行 辅助 。 








12.5 图 片 压缩 

随 着 Web 页面 设 计 的 发 展 ， 越 来 越 多 的 图 片 应 用 到 了 页 面 中 ， 这 也 
使 得 图 片 的 加载 和 展示 成 为 了 了 Web 前端 比较 突出 的 性 ns 
门户 网 站 中 ， 图 片 的 请 求 数 往往 接近 总 请 求 数 一 半 以 上 


12.5.1 JPEG、PNG 和 GIF 





在 实际 开发 中 ，JPEG、PNG 和 GIF 是 最 常见 的 图 片 格式 。 深 入 理解 
这 三 ee 在 哪 种 情况 下 使 用 ， 并 且 如 何 减 少 图 片 大 小 非常 重 


(1) JPEG 可 以 很 好 地 处 理 大 面积 色调 的 图 像 ， 适 合 存储 颜色 丰富 
ee 


(2) PNG 是 一 种 无 损 格 式 ， 可 以 无 损 压 缩 以 保证 页 面 打开 速度 。 
此 外 ，PNG 支 持 透 明 。 


(3) GIF 格 式 图 像 效 果 较 差 ， 但 是 可 以 制作 动画 。 

也 就 是 说 ， 如 果 想 要 展示 色彩 丰富 而 高 品质 图 片 ， 可 以 使 用 JPEG 
格式 ; 如 果 是 一 般 图 片 ， 为 了 减少 体积 ， 可 以 使 用 PNG 格 式 ; 如 果 是 动 
画图 片 ， 可 以 使 用 GIF 格 式 。 


关于 JPEG、PNG 和 GIF 更 为 详细 的 介绍 ， 请 参考 本 书 的 姊妹 篇 
《Web 前 端 开 发 精品 课 HTML 和 CSS 基 础 教程 》。 


12.5.2 图片 压 缩 

图 片 的 传输 量 在 一 个 页 面 的 传输 量 中 往往 占 的 比重 很 高 ， 因 此 对 图 
片 大 小 的 压缩 尤为 重要 。 图 片 压 缩 工 具 很 多 ， 不 过 以 在 线 工 具 居 多 。 下 
面 推荐 两 款 比较 好 的 在 线 工 具 。 


(1) JPEG: 推荐 JPEGmini， 网 址 : http://www.jpegmini.com 























(2) PNG: 推荐 TinyPNG， 网 址 : https:Wtinypng.org。 这 一 款 在 线 
工具 甚至 比 Photoshop 的 压缩 率 还 要 高 ， 强 烈 推荐 。 


以 上 都 是 很 好 的 在 线 工 具 ， 如 果 你 想 要 使 用 本 地 软件 ， 推 荐 
ImageOptim 这 一 于 软件 。ImageOptim 是 一 黎 非 常 强 大 的 工具 ， 可 以 压缩 
JPEG、PNG 以 及 GIF 等 各 种 格式 的 图 片 ， 可 以 将 图 片 大 小 缩减 30% 一 
359%6。 此 外 还 文 持 拖 放 功能 ， 操 作 也 非常 简单 。 


ImageOptim 下 载 地 址 : https://imageoptim.com/。 


12.6 ”高 性 能 的 选择 器 


选择 器 是 CSS 中 最 常见 的 东西 。 但 是 很 多 人 却 不 知道 ， 不 同 的 选择 
虱 其 实 性 能 是 不 一 样 的 。 了 解 选择 右 在 浏 贤 旨 中 的 解析 原理 以 及 不 同 选 
择 吉 的 解析 速度 ， 能 够 让 我 们 的 CSS 性 能 速度 锦上添花 。 


12.6.1 选择 器 在 浏览 器 的 解析 原理 


一 般 情况 下 ， 我 们 都 是 从 左 到 右 来 阅读 代码 的 ， 因 此 对 于 上 面 这 行 
代码 ， 我 们 也 会 习惯 性 地 以 为 浏览 器 是 从 左 到 右 进 行 解析 的 : 首先 找到 
id 为 column 的 元 素 ， 然 后 再 查找 该 元 素 下面 class 为 content 的 元 素 ， 最 后 
在 已 经 匹配 的 元 素 下 查找 所 有 的 div 元 素 。 


但 是 事实 上 却 恰恰 相反 ， 浏 览 器 对 选择 器 规则 是 从 右 到 左 进行 解析 
的 : 首先 查找 所 有 的 div 元 素 ， 然 后 再 查找 该 div 元 素 是 否 存在 具有 
content 类 的 父 元 素 ， 最 后 在 已 经 匹配 的 父 元 素 中 继续 向 上 查找 祖先 元 素 
是 否 含 有 id 为 column 的 元 素 。 


当然 ， 如 果 浏 览 器 是 从 左 到 右 解析 选择 器 规则 的 话 ， 上 面 这 个 选择 
器 效率 很 高 。 但 事实 上 浏览 器 是 从 右 到 左 进行 解析 的 ， 这 种 看 似 十 分 高 
效 的 选择 器 匹配 开销 是 很 高 的 ， 因 为 浏览 器 必须 首先 遍历 页 面 所 有 的 
div 元 素 ， 然 后 才 确 定 其 父 元 素 的 class 是 否 为 content。 

看 到 这 里 ， 小 伙伴 们 都 会 大 吃 一 惊 : “我 out 了 ! ” 


12.6.2 ”不 同 选择 器 的 解析 速度 
































上 


#column .content divt{.....} 


#column .tes 七 { 





_ 问 大 家 一 个 问题 ， 这 3 种 选择 器 选中 的 都 是 同一 个 元 素 ， 那 么 性 能 
最 高 的 是 哪个 昵 ? 实际 上 ， 第 三 个 性 能 最 好 ， 第 一 个 性 能 最 差 。 由 于 第 
三 个 选择 器 直接 使 用 id 选择 器 ， 而 id 在 整个 页 面具 有 唯一 性 ， 因 此 可 以 
快速 定位 。 第 一 个 选择 器 需要 先 匹 配 所 有 的 div 元 素 ， 对 于 一 个 页 面 来 
说 ， 这 是 个 不 小 的 匹配 量 。 

浏览 器 解析 选择 器 的 原则 是 从 右 到 左 的 ， 因 此 我 们 书写 的 最 右边 的 
选择 器 ， 被 称 为 关键 选择 器 。 这 个 关键 选择 堪 ， 对 于 执行 效率 有 决定 性 
的 影响 。 谷 歌 资 深 Web 开 发 工程 师 Steve Souders 对 CSS 选 择 器 的 匹配 效 
率 从 高 到 低 做 了 一 个 排序 。 

(1) id 选择 器 。 

(2) class 选 择 器 。 

(3) 元 素 选 择 紫 。 

(4) 相 邻 选择 器 。 

(5) 子 选 择 器 。 

(6) 后 代 选 择 器 。 

(7) 通配符 选择 器 。 

(8) 属性 选择 器 。 

(9) 伪 类 选择 器 。 
根据 以 上 “选择 器 在 浏览 器 的 解析 原理 ”以 及 “各 种 选择 右 的 匹配 效 


率 ”， 如 宋 我 们 想 要 更 好 地 使 用 高 性 能 的 选择 器 ， 需 要 注意 以 下 四 个 技 
巧 。 











1. 不 要 使 用 通配符 


在 选择 器 中 ， 通 配 符 一 般 用 于 选取 页 面 中 所 有 元 素 。 例 如 “{}” 表 示 


选取 页 面 所 有 元 素 ，“#wrapper *{}” 表 示 选 取 id 为 wrapper 元 素 下 面 的 所 
有 子 元 素 。 


通配符 的 匹配 量 非常 大 ， 一 般 情 况 下 不 建议 使 用 。 当 然 ， 从 上 面 的 
CSS 选 择 器 匹配 效率 排序 也 可 以 看 出 来 通配符 的 效率 非常 低 。 





2. 不 要 在 id 选 择 器 以 及 class 选 择 器 前 添加 元 素 名 


元 素 的 id 在 一 个 页 面 中 具有 唯一 性 ， 因 此 在 id 选 择 器 前 添加 元 素 名 
是 多 余 的 ， 同 时 也 增加 了 匹配 量 。 


元 素 的 class 不 具有 唯一 性 ， 如 果 在 class 选 择 器 前 添加 元 素 名 ， 则 表 
示 选 择 某 一 个 class 的 某 一 种 元 素 。 除 非 是 迫不得已 的 情况 ， 人 否则 尽量 不 
要 使 用 “class 选 择 器 前 添加 元 素 名 ”这 种 方式 。 





举例 : 


/* 多 余 的 写法 */ 
div#wrapper{font-size:12px;} 





/* 正 确 的 写法 */ 
#wrapper{font-size:12px;} 











3. 选择 器 最 好 不 要 超过 三 层 ， 位 置 靠 右 的 选择 条 件 尽 可 能 精确 





选择 器 的 层级 越 多 ， 浏 览 右 解析 时 匹配 的 次 数 就 越 多 ， 因 而 速度 吏 
越 慢 。 因 此 在 定义 选择 器 时 ， 我 们 要 尽量 让 选择 器 的 层级 少 一 些 ， 最 好 
不 要 超过 三 层 。 此 外 ， 根 据 选择 器 在 浏览 器 中 从 右 到 左 的 解析 原理 可 
知 ， 位 置 靠 右 的 选择 条 件 越 精确 ， 匹 配 量 就 越 少 ， 速 度 就 越 快 。 


避免 使 用 后 代 选 择 器 ， 尽 量 少 用 子 选 择 器 
后 代 选 择 器 匹配 量 比较 大 ， 应 该 避免 使 用 。 如 果 非 要 用 的 话 ， 建 议 


使 用 子 选 择 需 代 符 。 但 是 子 选 择 髓 匹配 量 也 不 小 ， 如 果 有 其 他 选择 器 如 
id 选 择 器 或 class 选 择 右 等 代 瞪 ， 也 尽量 少 用 子 选择 器 。 不 过 我 们 要 注意 





一 下 ， 尺 量 少 用 不 等 于 不 用 ， 不 要 为 了 减少 子 选择 器 的 使 用 而 增加 过 多 
的 id 和 class， 以 致 it 和 class 泛 小 成 灾 。 


【疑问 】 


能 提升 呢 ? 


之 前 已 经 明确 说 过 了 ， 对 于 小 项 目 来 次 ， 这 的 确 没 多 大 影响 。 但 是 
对 于 一 个 大 型 项 目 ， 特 别 是 访问 量 每 天 达 几 百 万 次 的 网 站 来 说 ， 哪 人 是 


雅 的 代码 是 高 手 们 的 一 种 民 好 习惯 。 因 为 高 手 也 讲 客 “诗意 的 栖 居 ?”。 


当然 对 于 小 项 目 来 说 ， 我 们 还 是 在 确保 CSS 的 可 读 性 和 可 维护 性 民 
好 的 前 担 下 ， 再 去 考虑 高 性 能 的 选择 器 。 











第 13 章 ”CSS 技巧 


13.1 ”水平 居中 


实现 文字 、 图 片 以 及 元 素 等 的 居中 是 CSS 开 发 中 必须 掌握 的 技巧 之 
一 。 在 CSS 中 ， 居 中 包括 两 个 方面 :水 平 居 中 和 垂直 居中 。 当 然 居中 对 
象 也 包括 两 个 文字 和 元 素 。 这 一 节 ， 我 们 先 来 给 大 家 介绍 一 下 CSS 水 
平 大 中 的 技巧 。 


13.1.1 文字 的 水 平 居 中 


如 琳 想 要 实现 单行 文字 的 水 平 居 中 ， 我 们 使 用 text-align 属 性 束 能 轻 
松 实现 。 多 行文 字 的 水 平 居中 较 少 ， 在 此 可 以 忽略 。 








语法 : 
举例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 


display:inline-block; 
width:566pX; 
height:56px; 
line-height:56px; 
text-align:center; ”/* 实 现 div 元 素 内 文字 水 平 居中 */ 
border:1px dashed gray; 
} 
</style> 
</head> 
<body> 
<div>CSSs 实 现 单行 文字 水 平 居 中 : text-align:center;</div> 
</body> 
</html> 











在 浏览 器 预 吃 效果 如 图 13-1 所 示 。 


CSS 实 现 单 行文 字 水 平 居 中 : text-align:center: 





图 13-1 ”文字 的 水 平 居 中 
13.1.2 ”元素 的 水 平 居 中 
1. 块 元 素 (block ) 


在 浏览 网 页 时 ， 我 们 经 和 常 看 到 很 多 网 站 的 布局 ， 都 是 将 内 容 整 体 进 
行 水 平 居中 。 其 实 这 是 在 最 外 层 使 用 div 来 包 右 ， 然 后 对 div 元 素来 实现 
水 平 居 中 。 从 本 质 上 来 说 ，div 元 素 就 是 块 元 素 。 


在 CSS 中 ， 对 于 块 元 素 ， 如 果 给 定 了 宽度， 直接 定义 margin-left 和 
margin-right 都 为 auto 就 能 实现 水 平 居 中 。 











百 法 : 


margin:6 auto; 


说 明 : 


“margin:0 auto;” 等 价 于 “margin:0 auto 0 autoj”， 也 就 是 说 真正 起 作 
用 的 是 “margin-left:auto;” 和 “margin-right:auto;”， 大 家 要 理解 这 一 点 。 从 
上 面 我 们 知道 ， 如 果 想 要 在 居中 的 同时 加 一 个 上 外 边 距 ， 可 以 写 
成 “margin:20px auto 0 autoj”。 如 果 想 要 在 居中 的 同时 加 一 个 下 外 边 距 ， 
可 以 写成 “margin:0 auto 20px auto;”...... 也 就 是 说 ， 只 要 我 们 保证 margin- 
left 和 margin-right 都 为 auto， 就 能 保证 块 元 素 的 水 平 居 中 。 


对 于 块 元 系 来 说 ， 不 管 父 元 素 的 宽度 如 何 ， 只 要 给 块 元 系 指 定 宽 
度 ， 这 个 方法 殊 有 效 。 如 果 没 有 给 块 元 系 指 定 宽度 ， 则 块 元 系 默 认 会 占 
满 允 许 的 最 大 宽度 ， 此 时 这 个 方法 是 没有 效 的 。 因 此 想 要 使 用 “margin:0 
auto” 来 实现 块 元 素 的 水 平 大 中 ， 束 一 定 要 指定 块 元 素 的 冤 度 。 

















站 例 ; 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 
{ 
margin:6 auto; 
width:862% ; 


height:166pX; 
border:1px solid gray 


} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 





在 浏览 絮 预 换 效 果 如 图 13-2 所 示 。 


文件 ( ”编辑 (E) ”前 者 (V) ”收藏 夫 (A) Im 帮助 

















图 13-2 ” 块 元 素 的 水 平 居中 


分 析 : 


在 这 个 例子 中 ， 需 要 水 平 居 中 的 元 素 为 div，div 元 素 的 父 元 素 为 
body。 这 些 逻 辑 大 家 要 搞 清 楚 。 这 个 技巧 在 实际 开发 中 经 常用 到 ， 小 伙 
伴 们 得 认真 掌握 。 





2. 行内 元 素 (Cinline) 以 及 复合 行内 元 素 (inline-*) 











对 于 行内 元 素 inline) 以 及 复合 行内 元 又 (inline-* ) ， 我 们 可 以 
使 用 “text-align:center” 来 实现 水 平 居中 。 也 就 是 说 ，*“textralign:center” 不 
仅 可 以 用 于 文字 ， 也 可 以 用 于 行内 元 素 以 及 复合 行内 元 素 。 


合 行内 元 素 包 括 inline-block、inline-table 以 及 inline-flex 之 类 的 元 








五 
TD 法 : 


举例 : 


< IDOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div{text-align:center;} 
</style> 


</head> 
<body> 
<div><strong>strong 元 素 </strong></div> 
<div><span>span 元 素 </span></div> 
<div><a href="http://www.lvyestudy.com">a 元 素 </a></div> 
</body> 
</html> 





在 浏览 器 预 吃 效果 如 图 13-3 所 示 。 





图 13-3 inline 元 素 的 水 平 居 中 


举例 ; 





<“!DOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 


<title></title> 
<style type="text/css"> 
body{text-align:center;} 
div 
{ 
display:inline-block; 
width:166pX; 
height:166pX; 
border:1px solid gray 


} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 13-4 所 示 。 


(SI 愉 http://localhost: 时 ro 

















图 13-4 ”inline- 块 元 素 的 水 平 居中 


此 外 我 们 要 清楚 一 点 ,图 片 img 也 是 inline-block 元 素 。 


13.2 ”垂直 居中 


对 于 垂直 居中 ， 我 们 也 从 “文字 ”和 "元 系 ? 两 个 方面 来 给 大 家 介绍 一 
下 ， 以 便 有 一 个 清晰 的 学 习 思 路 。 


13.2.1 文字 的 垂直 居中 
1. 单行 文字 


对 于 单行 文字 来 说 ， 我 们 定义 line-height 和 height 这 两 个 属性 的 值 相 
等 就 可 以 实现 垂直 居中 。 


举例 ; 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 


height:166pX; 


line-height:166px; 
border:1px solid gray; 


} 
</style> 
</head> 
<body> 
<div>《Web 前 端 开发 精品 课 》</div> 
</body> 
</html> 











在 浏览 如 预 览 效 果 如 图 13-5 所 示 。 


) 由 - 并 hitp://loca 过 Dro 





web 前端 开 发 精品 课 依 














图 13-5 ”单行 文字 的 垂直 居中 


分 析 : 


为 什么 定义 height 和 line-height 这 两 个 属性 值 相 等 ， 就 可 以 实现 单行 
文字 的 垂直 居中 呢 ?” 对 于 这 一 点 ， 我 们 在 第 4 章 “ 深 入 line-height” 这 一 节 
己 经 给 大 家 详细 介绍 过 了 。 





和 2。 区 行 交 宁 





如 果 父 元 素 高 度 回 定 ， 文 字 可 能 是 两 行 或 者 更 多 行 ， 如 何 实现 多 行 
文字 的 垂直 居中 呢 ? 


语法 : 


display:table-cell; 


vertical-align:middle; 


} 
span{display:inline-block;} 





说 明 : 








实现 的 关键 是 ， 用 一 个 span 标 签 把 所 有 文字 包含 起 来 ， 然 后 定义 
span 为 inline-block 元 素 ， 之 后 使 用 inline- 块 元 素 垂 直 拓 中 的 方式 来 处 理 
即 可 。 对 于 inline- 块 元 系 垂直 居中 的 实现 方式 ， 我 们 在 下 面 会 讲解 。 大 
家 可 以 对 比 理 解 一 下 。 








举例 : 


<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
p 
{ 
display:table-cell; 
vertical-align:middle; 
width:4060px; 
height:126pX; 
border:1px dashed gray 


span{display:inline-block;} 
</style> 
</head> 
<body> 


<p> 
<span>《web 前 端 开 发 精品 课 .HTML 和 Css 基础 教程 》<br/> 
《web 前 端 开发 精品 课 .HTML 和 css 进 阶 教程 》<br/> 
《web 前 端 开发 精品 课 .CSS3 教 程 》</span> 
</p> 
</body> 
</html> 




















在 浏览 絮 预 览 效 果 如 图 13-6 所 示 。 


《web 前 端 开 发 精品 课 .HTNL 和 CSS 基 础 教程 》 
:<web 人 前端 开发 精品 课 . HT 县 和 CSS 进 队 教 程 人 
冬 web 前 端 开发 精品 课 .CSS3 教 程 今 





图 13-6 ”多 行文 字 的 垂直 居中 
13.2.2 元素 的 垂直 居中 
1. 块 元 素 (block) 


块 元 素 的 垂直 居中 一 直 很 及 烦 ， 对 于 高 度 已 知 的 块 元 素 ， 我 们 可 以 
使 用 万 能 的 position 方 法 来 实现 。 


使 用 position 方 法 ， 父 元 素 和 子 元 素 都 必须 定义 宽度 和 高 度 ， 然 后 
给 父 元 素 写 上 “position: relative”， 这 样 做 是 为 了 给 子 元 素 添 
加 “position:absolute” 的 时 候 不 会 被 定位 到 外 太空 去 。 接 下 来 给 子 元 素 添 
加 如 下 属性 : 











position:absolute; 





之 后 再 添加 如 下 属性 : 


margin-top:"height 值 一 半 的 负 值 "; 
margin-top:"width 值 一 半 的 负 值 ". 





position:relative; 


} 
子 元 素 


position:absolute; 
top:508%; 
left:506%; 
margin-top:"height 值 一 半 的 负 值 "; 
margin-left:"width 值 一 半 的 负 值 ";} 





说 明 : 


position 这 种 方法 是 万 能 的 ， 也 就 是 不 仅 可 以 用 于 块 元 素 ， 还 可 以 
用 于 inline、inline-block 元 素 。 对 于 margin-top 和 margin-left 为 什么 要 这 样 
定义 ， 大 家 自己 画 个 草稿 就 能 理解 了 。 


< 汪 例 : 











<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#father 


{ 


} 


position:relative; 
width:260px; 
height:166pX; 
border:1px solid gray 


#son 


{ 


position:absolute; 
top:506%; 

left:5068%; 
margin-top:-38px; 
margin-left:-56px; 
width:166px; 
height:68px; 
background-color:Red; 





} 
</style> 
</head> 
<body> 
<div id="father"> 
<div id="son"></div> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 13-7 所 示 。 


图 13-7 块 元 素 的 垂直 居中 








分 析 : 





对 于 position 方 法 ， 我 们 需要 注意 以 下 两 点 。 


(1)〉position 方 法 可 以 用 于 所 有 元 了 素 ， 包 括 inline、inline-block、 
block 元 素 。 


(2) position 方 法 可 以 实现 水 平和 垂直 两 个 方 同 同时 居中 ， 如 果 单 
独 想 要 水 平 大 中 ， 把 top 和 margin- top 这 两 个 属 性 去 掉 即 可 。 如 果 想 要 单 
独 实现 垂直 居中 ， 把 left 和 margin-left 这 两 个 属性 去 掉 即 可 。 





2. 行内 块 元 素 (inline-block ) 


对 于 行内 块 元 素 的 垂直 居中 ， 我 们 可 以 使 用 “display:table-cell* 结 
合 “vertical-middle” 来 实现 。 结 合 之 前 “display:table-cell” 这 一 节 介 绍 的 内 


容 ， 我 们 很 容易 理解 其 原理 。 


语法 : 


display:table-cell; 


vertical-align:middle; 


} 
子 元 素 {vertical-align:middle;} 





举例 : 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
div 
{ 
display:table-cell; 
vertical-align:middle; 
width:246px; 
height:166pX; 


border:1px solid gray 


} 
img{vertical-align:middle;} 
</style> 
</head> 
<body> 
<div> 
<img src="images/haizei2.png" alt=""/> 
</div> 
</body> 
</html> 





在 浏览 絮 预 换 效 果 如 图 13-8 所 示 。 


可 








图 13-8 inline- 块 元 素 的 垂直 居中 


在 实际 开发 中 ， 对 于 水 平 居 中 和 垂直 居中 的 实现 ， 除 了 这 两 节 介绍 
这 些 方法 ， 我 们 还 可 以 考虑 使 用 padding 和 margin 来 实现 。 


13.3 CSS Sprite 


在 浏览 网 页 的 过 程 中 ， 我 们 经 常 可 以 看 到 很 多 网 站 都 会 使 用 各 种 图 
标 、LOGO 等 ， 如 图 13-9 和 图 13-10 所 示 。 这 些 图 标 很 多 时 候 是 使 用 背景 
图 片 来 实现 的 。 有 人 会 想 ， 一 个 图 标 就 使 用 一 张 背景 图 片 来 实现 ， 这 样 
岂 不 是 很 影响 网 站 的 性 能 ? 确实 ， 如 果 一 个 图 标 就 使 用 一 张 背 景 图 片 ， 
那么 每 一 个 图 标 都 会 引发 一 次 HTTP 请 求 ， 极 大 地 影响 了 网 站 的 性 能 ， 
并 且 难 以 维护 。 


一 个 好 的 解决 办 法 就 是 把 这 些 图 标 全 部 放 到 一 张 背景 图 片 里 面 去 ， 
这 样 就 只 会 引发 一 次 HTTP 请 求 了 。 如 果 把 所 有 图 标 放 到 一 张 背景 图 片 
里 面 ， 那 该 怎么 把 图 标 拿 出 来 使 用 呢 ? 这 个 我 们 可 以 使 用 CSS 中 的 
background-position 进 行 背 景 定位 来 取出 相应 的 图 标 。 上 和 面 这 些 ， 其 实 
就 是 我 们 常 说 的 CSS Sprite 技 术 。 
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图 13-9 ”淘宝 中 的 小 图 标 效 果 
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图 13-10 CSS Sprite 图 (雪碧 图 ) 


CSS Sprite， 义 称 为 “CSS 精 灵 ” 或 者 “CSS 雪 和 手 图 *"。 它 将 零散 的 小 背 
景 图 合并 成 一 张大 的 背景 图 ， 然 后 利用 background-position 属 性 进行 背 
景 定 位 从 而 显示 相应 的 小 背景 图 。 其 中 ， 合 并 之 后 的 大 背景 图 ， 我 们 又 
币 称 为 " 雪 丰 图 ”。CSS Sprite 听 起 来 很 高 深 ,但 是 往往 很 深奥 的 名 词 都 
是 拿 来 吓 距 人 的 。 


想 要 使 用 CSS Sprite， 只 需要 简单 的 两 步 即 可 。 


(1) 使 用 Photoshop 或 者 其 他 工具 将 小 背景 图 合并 成 为 一 张大 背景 
图 ， 其 中 每 一 张 小 背 景 图 要 精确 调整 。 


(2) 使 用 background-image 属 性 引入 大 背景 图 ， 并 且 结 合 
background-position 属 性 定位 取出 相应 的 图 标 。 


对 于 CSS Sprite 的 使 用 ， 我 们 推荐 两 蒜 非常 不 错 的 工具 : CSS Sprite 
Generator 和 Sprite Cow。 其 中 CSS Sprite Generator 是 一 款 在 线 工具 ， 我 们 
可 以 上 传 一 个 包含 多 个 小 背景 图 的 压缩 包 ， 然 后 工具 会 自动 生成 大 背景 
图 ( 雪 手 图 ) 。 此 外 ， 这 和 亚 工 具 还 可 以 自 定 义 小 背景 图 的 位 置 、 透 明度 
以 及 背景 色 等 。Sprite Cow 可 以 用 于 自动 生成 “ 雪 焉 图 ”中 某 一 个 小 背景 
图 的 CSS 代 码 ， 这 样 我 们 束 不 需要 那么 嘛 烦 地 一 个 个 地 去 取 小 背景 图 的 
具体 位 置 像素 了 。 

















CSS Sprite Generator 官 方 网 址 : http://css.spritegen.com/ 


Sprite Cow 官 方 网 址 : http://www.spritecow.com 


举例 ; 





<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
table{border-collapse:collapse;} 
table, tr,th,td{border:1px solid silver;} 
caption{font-weight:bold;margin-bottom:5px;} 




















th 
{ 
padding:3px; 
width:86px; 
font :微软 雅 黑 normal 14px/28px; 
font-weight:normal; 
background-color:#F1F1F1; 
} 
.Chrome, .firefox, .ie, .opera, .safari 
{ 
background: url(images/sprite.png) no-repeat; 
height:36px; 
padding-left:36px; 
} 


.Chrome { background-position: -6px -epx; } 
.firefox { background-position: -Opx -36px; } 
.ie { background-position: -6px -66px;} 
.opera { background-position: -Opx -96px;} 
.Safari { background-position: -px -126px; } 


</style> 
</head> 
<body> 
<table> 
<caption>border-radius 的 浏览 器 支持 情况 </caption> 
<thead> 
<tr> 


<th>Chrome</th> 
<th>Firefox</th> 


<th>IE</th> 
<th>O0pera</th> 
<th>Safari</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="chrome"></td> 
<td class="firefox"></td> 
<td class="ie"></td> 
<td class="opera"></td> 
<td class="safari"></td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 





i 览 器 支持 情况 


Chrome Firefox Opera Safari 
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图 13-11 CSS Sprite 实 例 





这 个 例子 使 用 的 * 雪 外 图 "如 图 13-12 所 示 。 





® 





图 13-12 ”CSS Sprite 实 例 用 到 的 “ 雪 珀 图 ” 


CSS Sprite 技 术 最 大 的 优点 就 是 减少 HTTP 请 求 数 ， 从 而 提高 页 面 的 
加 载 速度 。 除 了 减少 HTTP 请 求 数 ，CSS Sprite 还 减 小 了 图 片 整体 的 大 
小 。 一 般 情 况 下 ， 几 张 小 图 片 合并 成 一 张大 图 片 后 的 大 小 总 是 小 于 这 几 
种 小 图 标的 大 小 总 和 。 


不 过 CSS Sprite 也 存在 很 明显 的 缺点 ， 那 就 是 “开发 和 维护 比较 困 
难 ”。 在 开发 过 程 中 ， 需 要 精准 计算 每 个 小 背景 图 在 大 背景 图 中 的 位 
置 ， 比 较 繁 琐 复杂 。 在 维护 过 程 中 ， 有 时 候 需要 增加 新 的 小 背景 图 ， 可 
We 这 样 又 得 重新 精准 调整 小 背景 图 的 位 











在 使 用 CSS Sprite 技 术 时 ， 我 们 需要 注意 以 下 几 点 。 
(1) 在 开发 后 期 而 不 是 开发 前 期 使 用 CSS Sprite。 


“ 雪 丰 图 ”的 制作 比较 党 琐 ， 如 果 在 开发 前 期 天 使 用 ， 可 能 雪 自 图 中 
小 背景 图 位 置 得 经 和 改变 ， 维 护 起 来 比较 驴 烦 。 因 此 建议 在 开发 后 期 再 
使 用 CSS Sprite。 


(2) 有 条 理 地 组 织 “ 雪 下 图 ”。 


我 们 将 小 背景 图 合并 成 “ 雪 姓 图 ”的 时 候 ， 应 该 将 小 背景 图 按照 类 
别 、 风 格 、 大 小 等 分 门 别 类 地 放 好 ， 不 要 东 放 一 个 西 放 一 个 。 有 条 理 地 
组 织 “ 雪 丰 图 ”便于 后 期 的 维护 。 


(3) 控制 < 雪 槛 图 "的 天 小 ， 


据 研 究 表明 ， 如 果 图 片 的 大 小 在 200KB 以 内 ， 则 图 片 传 输 的 时 间 是 
差不多 的 。 因 此 ,“ 雪 得 图 ”最 好 不 要 超过 200KB。 如 果 图 片 太 大 ， 会 耗 
费 更 多 的 传输 时 间 ， 从 而 影响 网 站 加 载 速度 。 对 于 大 于 200KB 的 “ 雪 末 
图 ”， 我 们 应 该 根据 类 别 分 割 成 多 个 “ 雪 自 图 ”比较 好 。 























13.4 Icon Font 几 标 


对 于 小 图 标 效 果 ， 估 计 很 多 人 能 够 想到 的 是 使 用 CSS Sprite 结 合 背 
景 图 片 来 实现 。 但 是 在 实际 开发 中 ， 我 们 都 是 秉 着 “ 少 用 图 片 ”? 的 原则 。 
因为 图 片 数据 传输 量 大 ， 并 且 会 引发 一 次 HITP 请 求 。 而 且 对 于 这 些小 
图 标 ， 也 可 能 会 有 多 个 尺寸 、 多 种 颜色 等 ， 如 采 要 使 用 背景 图 片 来 实现 
ee 0 
本 小 网 标 。 


图 13-13 ”绿叶 学 习 网 


: 站 长 的 新 书 《Web 前 端 开 发 精品 误 》 正 式 出 版 啦 , 小 伙伴 们 赶紧 去 看 看 并 支持 一 下 吧 : 查看 详情 
1.1 前 端 技术 简介 
只 作者 (helicopter) ”中 赞 (161) 浏览 (49968) 评论 (90) 说 明 :原创 教程 ， 茜 止 转载 
图 13-14 ”绿叶 学 习 网 回 顶 部 效果 中 的 小 图 标 文章 页 面 中 的 小 图 标 
想 要 实现 小 图 标 效 末 ， 比 较 好 的 解决 方法 就 是 使 用 icon font 图 标 技 
术 。 所 请 的 “icon font 图 标 技术 ， 指 的 束 古 使 用 字体 文件 取代 图 片 文 
件 ， 来 实现 小 图 标 效果 。 


13.4.1 iconfont 网 站 











iconfont 是 国内 功能 很 强大 且 图 标 内 容 很 丰富 的 矢量 图 标 亩 。 它 是 


由 阿里 巴巴 体验 团队 倾 力 打造 的 一 蒜 集 设计 和 前 端 开 发 的 便捷 工具 。 
iconfont 提 供 矢 量 图 标 下 载 、 在 线 存储 、 格 式 转 换 等 功能 。 要 想 使 用 icon 
font 图 标 ， 就 必须 结合 这 个 网 站 。 官 方 网 址 为 http://www.iconfont.cn/。 

接 下 来 ， 我 们 来 简单 介绍 一 下 如 何 使 用 iconfont 网 站 。 

01 


打开 官网 首页 ， 界 面 如 图 13-15 所 示 。 左 上 角 “ 图 标 库 ”下 有 两 个 选 
项 ， 分 别 为 “官方 公开 库 ” 和 “所 有 公开 库 ”。 





图 13-15 ”第 1 步 


02 


单 击 “ 所 有 公开 库 ” 之 后 ， 界 面 如 图 13-16 所 示 。 右 上 角 有 四 个 排序 
选项 ， 可 以 目 行 选择 。 


公共 图 标 库 yellow 
田村 国生 入 四 本 其 
@ 团 昌 杂 因由 0 vo 
路 自 名 外 国 芒 w a 
四 口上 回回 固 后 A 加 NA 旦 


图 13-16 ”第 2 步 


03 
任意 单 击 一 个 图 标 库 进去 ， 界 面 如 图 13-17 所 示 。 





ICONFONT.cN 
®S ® 四 0 呈 6 


图 13-17 第 3 步 


04 


单 击 你 需要 的 图 标 ， 然 后 被 单 击 的 图 标 会 收藏 在 右上 角 的 “ 暂 存 
架 ” 上 ， 如 图 13-18 所 示 。 


05 


菜单 。 ”首页 


图 13-18 ”第 4 步 





选择 完毕 之 后 ， 在 “ 暂 存 架 ” 上 单 击 “下 载 到 本 地 ”。 解 压 文件 夹 之 
后 ， 如 图 13-19 所 示 。 


13.4.2 


的 


逢 | demo.css 层 和 全 样式 表 文 档 

人 demo.html 360 Chrome HT.. 

米 | iconfont.css 层 得 样式 专文 档 

| | iconfont.eot EOT 文件 

S| iconfont.svg SVG 文档 

,iconfont.ttf TrueType 字体 文件 
iconfont.woff WOFF 文件 


图 13-19 ”第 5 步 


icon font 技 术 


从 iconfont 网 站 下 载 的 文件 中 ， 有 几 个 是 比较 重要 的 : iconfont.eot、 
iconfont.svg、iconfont.ttf、iconfont.woff， 如 表 13-1 所 示 。 其 实 这 四 个 都 
是 字体 文件 ， 我 们 简单 了 解 一 下 即 可 。 


表 13-1 字体 文件 格式 





.eot 


日 字体 格式 





微软 开发 的 用 于 舱 入 网 页 的 字体 ， 匡 专 有 有 





W3C 组 织 推荐 的 标准 ，Web 字 体 最 佳 格 式 











Mac OS 和 Windows 操 作 系 统 中 最 常见 的 字体 格式 





W3C 组 织 制定 的 开放 标准 的 图 形 格 式 





想 要 使 用 iconfont 图 标 ， 我 们 就 必须 要 在 CSS 中 引入 这 四 个 字体 文 


@font-face 
{ 
font-family: "iconfont"; 
src: url("fonts/iconfont.eot"); /* IE9 兼容 模式 */ 
src: url("fonts/iconfont.eot?#iefix") format("embedded-opentype"), 
url("fonts/iconfont.woff") format("woff"), 
url("fonts/iconfont.ttf") format("truetype"), 


url("fonts/iconfont.svg") format("svg"); 
font-weight: normal; 


font-style: normal; 
} 


.iconfont 


{ 


font-family: "iconfont"; 
font-style: normal; 

font-weight: normal; 
-webkit-font-smoothing:antialiased; 
-moz-OosXx-font-smoothing:grayscale; 


} 





说 明 : 


使 用 iconfont 图 标的 关键 语法 就 是 @font-face。@font-face 用 于 上 自 定 
义 字 体 ， 具 体 语法 不 在 此 展开 ， 可 以 参考 绿叶 学 习 官网 的 CSS3 教 程 
中 “ 敬 入 字体 @font-face” 这 一 广 。“-webkit-font-smoothing:antialiased;” 用 
于 webkit 引 苟 浏览 器 中 的 抗 锯齿， 而 “-moz-osx-font- 
smoothing:grayscale;” 用 于 Mac OSX Firefox 浏 览 器 中 的 抗 锯齿 。 


上 面 代 码 看 似 很 复杂 ， 但 是 我 们 也 没 必要 记 住 。 在 实际 开 及 中 ， 我 
们 直接 复制 过 去 用 就 行 了 。 


< 汪 ( 例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 





<head> 
<title></title> 
<«style type="text/css"> 
/* 自 定义 图 标 字 体 */ 
@font-face 
{ 
font-family: "iconfont"; 
src: url("fonts/iconfont.eot"); /* IE9 兼容 模式 */ 
src: url("fonts/iconfont.eot?#iefix") format("embedded-opentype" 
url("fonts/iconfont.woff") format("woff"), 
url("fonts/iconfont.ttf") format("truetype"), 
url("fonts/iconfont.svg") format("svg"); 
font-weight: normal; 
font-style: normal; 
} 
.iconfont 
{ 
font-family: "iconfont"; 
font-style: normal; 
font-weight: normal; 
-webkit-font-smoothing:antialiased; 
-moz-osx-font-smoothing:grayscale; 
} 
</style> 
</head> 
<body> 


<i class="iconfont">&#xe654;</i> 
</body> 


</html> 


在 浏览 器 预览 效果 如 图 13-20 所 示 。 


Be 


emo 


图 13-20 ”iconfont 小 图 标 实例 (1) 


分 析 : 


小 伙伴 们 可 能 会 觉得 很 奇 翌 ，“&#xe654:” 这 个 是 什么 ”其 实 从 
iconfont 网 站 下 载 下 来 的 文件 中 有 一 个 “demo.html”， 我 们 点 击 进去 可 以 
看 到 每 个 图 标 都 有 对 应 一 个 字符 串 。 我 们 想 要 使 用 哪个 小 图 标 ， 就 写 上 
对 应 的 字符 串 即 可 ， 如 图 13-21 所 示 。 


IconFont 图 标 


QB a QQ 


对 话 菜单 首页 搜索 
CR#xe659 >  &#xe65d; &#xe654; &#Xe655; 
.duihua RD .Caidan .Shouye .SOUSUO 


图 13-21 ”图标 对 应 的 字符 串 


也 就 是 说 ， 如 果 我 们 想 要 在 页 面 中 使 用 iconfont 图 标 ， 必 须要 有 四 


步 
(1) 下 载 好 图 标 字 体 文件 并 且 放 入 网 站 目录 中 。 
(2) 在 CSS 中 ， 使 用 @font-face 自 定义 字体 。 


(3) 在 HTML 中 ， 元 素 添 加 class="iconfont"。 


(4) 在 元 系 中 添加 图 标 对 应 的 字符 串 。 


举例 ; 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
@font-face 
{ 
font-family: "iconfont"; 
src: url("fonts/iconfont.eot"); /* IE9 兼容 模式 */ 
src: url("fonts/iconfont.eot?#iefix") format("embedded-opentyp 
url("fonts/iconfont.woff") format("woff"), 
url("fonts/iconfont.ttf") format("truetype"), 
url("fonts/iconfont.svg") format("svg"); 
font-weight: normal; 
font-style: normal; 








} 


.iconfont 

{ 
font-family: "iconfont"; 
font-style: normal; 
font-weight: normal; 
-webkit-font-smoothing:antialiased; 
-MoZ-oOsX-font-smoothing:grayscale; 


font-size:68px; 
font-weight:bold; 
color:Red; 


} 
</style> 
</head> 
<body> 
<i class="iconfont">&#xe654;</i> 
</body> 
</html> 





在 浏览 器 预览 效果 如 岁 13-22 所 示 。 


© 


图 13-22 ”iconfont 小 图 标 实 例 (2) 


我 们 还 可 以 在 CSS 中 为 iconfont 图 标定 义 font-size、font-weight、 
color 等 ， 是 不 是 感觉 控制 小 图 标的 外 观 跟 控 制 字 体 的 外 观 一 样 的 简单 方 
便 ? 








举例 : 





<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
@font-face 
{ 


font-family: "iconfont"; 

src: url("fonts/iconfont.eot"); /* IE9 兼容 模式 */ 

src: url("fonts/iconfont.eot?#iefix") format("embedded-opentyp 
url("fonts/iconfont.woff") format("woff"), 
url("fonts/iconfont.ttf") format("truetype"), 
url("fonts/iconfont.svg") format("svg"); 

font-weight: normal; 

font-style: normal; 








} 


.iconfont 


{ 


font-family: "iconfont"; 
font-style: normal; 


font-weight: normal; 
-webkit-font-smoothing:antialiased; 
-moz-osx-font-smoothing:grayscale; 


} 
ul 
{ 
font-size:16px; 
font-weight:bold; 
} 


li{color:Blue;} 
i{font-size:21px;color:Red;margin-right:5px;} 
</style> 
</head> 
<body> 
<Ul> 
<1i><i class="iconfont">&#xe654;</i> 回 到 首页 </1i> 
<1i><i class="iconfont">&#xe655;</i> 搜 索 一 下 </1i> 
<1i><i class="iconfont">&#xe656;</i> 个 人 中 心 </1i> 
<li><i class="iconfont">&#xe653;</i> 我 的 购物 </1i> 
<1i><i class="iconfont">&#xe65d;</i> 我 的 菜单 </1i> 
</ul> 
</body> 
</html> 











在 浏览 器 预 儿 效果 如 图 13-23 所 示 。 
。 个) 回 到 首页 ， 
。 忆 搜索 一 下 : 
。 人 内 个 人 中 心 


。 全 | 我 的 购物 ， 
。 辐 我 的 菜单 ， 
图 13-23 Icon Font 小 图 标 实例 (3) 
对 于 iconfont 图 标 技术 ， 还 有 两 点 补充 说 明 。 
(1)〉iconfont 官 网 除了 提供 字体 图 标 ， 还 提供 图 标 管理 、WebFont 
技术 等 服务 。 我 们 应 该 到 官网 目 己 摸索 一 下 ， 了 解 这 些 会 给 你 的 前 端 开 
发 带 来 很 大 的 帮助 ; 


(2) 对 于 字体 图 标 ， 如 果 iconfont 官 网 满足 不 了 你 的 需求 ， 我 们 可 
以 访问 国外 最 大 的 图 标 分 享 网 站 icomoon。 相 对 于 iconfont，icomoon 的 








图 标 种 类 更 多 ， 功 能 也 更 为 强大 。 毕 竟 这 是 前 端 界 最 好 的 一 个 图 标 分 享 
网 。icomoon 官 网 地 址 为 https://icomoon.io/。 


第 14 章 ”重要 概念 


14.1 CSS 中 的 重要 概念 

在 最 后 一 章 里 ， 我 们 给 大 家 介绍 一 下 CSS 中 几 个 极其 重要 的 概念 。 
了 解 这 些 概念 对 你 深入 理解 CSS 的 本 质 相 当 重 要 : 

(1) 包含 块 containing block。 

(2) BFC 和 TIFC。 

(3) 层 登 上 下 文 。 

这 些 东西 比较 抽象 ， 难 以 理解 。 虽 然 国内 甚 少 书籍 会 涉及 ， 但 是 这 
些 概念 在 CSS 中 却 扮演 着 非常 重要 的 角色 ， 不 要 觉得 难 就 跳 过 。 如 果 要 
真正 地 掌握 CSS， 大 家 一 定 认 真 研读 、 一 定 要 认真 研读 、 一 定 要 认真 研 
读 (重要 的 事情 说 三 裔 ) 。 

认真 理解 这 些 ， 可 以 帮助 你 彻底 地 精通 CSS 。 





14.2 包含 块 


14.2.1 什么 是 包含 块 


我 们 都 知道 ， 如 果 有 两 个 div， 一 个 是 父 元 素 ， 男 外 一 个 是 子 元 
素 ， 父 元 素 会 决定 子 元 素 的 大 小 和 定位 。 包 含 块 是 什么 昵 ?简单 来 说 ， 
就 是 可 以 决定 一 个 元 素 大 小 和 定位 的 元 素 。 


包含 块 是 视觉 格式 化 模型 中 的 一 个 重要 概念 ， 它 与 CSS 盒 子 模 型 类 
似 。 包 含 块 也 可 以 理解 为 一 个 矩形 盒子 ， 这 个 矩形 的 作用 是 为 这 个 矩形 
内 部 的 后 代 元 素 〈 子 元 素 、 孙 元 系 等 ) 提供 一 个 参考 。 一 个 元 素 的 大 小 
和 定位 往往 是 由 该 元 素 所 在 的 包含 块 决 定 的 。 


通常 情况 下 ， 一 个 元 素 的 包含 块 是 由 离 它 最 近 的 “ 块 级 祖先 元 
素 ” 的 “内 容 边 界 ” 决 定 的 。 但 当 元 素 被 设置 为 绝对 定位 时 ， 此 时 该 元 素 
的 包含 块 是 由 离 它 最 近 的 “position:relative” 或 “position:absolute” 的 祖先 元 
素 决 定 。 一 个 元 素 生 成 的 盒子 会 扮演 该 元 素 的 内 部 元 素 包 含 块 的 角色 。 
也 就 是 说 ， 一 个 元 素 的 CSS 盒 子 为 它 的 内 部 元 素 建造 了 包含 块 。 


14.2.2 包含 块 的 判定 以 及 包含 块 的 范围 
一 个 元 素 会 为 它 的 内 部 元 素 创建 包含 块 ， 内 部 元 素 的 大 小 以 及 定位 
都 跟 它 的 包含 块 有 关 。 那 么 是 不 是 说 一 个 元 素 的 包含 块 就 是 它 的 父 元 系 


呢 ? 答案 是 否定 的 。 





























1. 根 元 素 


根 元 系 “HTML 元 素 ) ， 是 一 个 页 面 中 最 顶端 的 元 素 ， 它 没有 父 元 
素 。 根 元 素 存 在 的 包含 块 ， 被 称 为 "初始 包含 块 〈initial containing 
block) 。 











2. 固定 定位 元 素 


如 果 元 系 的 position 属 性 为 fixed， 那 么 它 的 包含 块 是 当前 可 视窗 





口 ， 也 就 是 当前 浏览 右 窗 口 。 

3. 静态 定位 元 素 和 相对 定位 元 素 

如 果 元 素 的 position 属 性 为 static 或 relative， 那 么 它 的 包含 块 是 它 最 
近 的 块 级 祖先 元 素 创 建 的 。 祖 先 元 素 必须 是 block、inline-block 或 者 


table-cell 类 型 。 


举例 ; 


<!DOCTYPE htm]> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 


<body> 
<div> 
<p><span></strong> 绿 叶 学 习 网 </span><strong></p> 
</div> 
</body> 
</html> 





对 于 上 和 面 的 HTML 元 素 的 包含 块 关系 如 表 14-1 所 示 。 这 里 注意 一 
下 ， 根 据 上 面 的 定义 ，strong 的 包含 块 是 p， 而 不 是 span。 


表 14-1 包含 块 关 系 表 











strong p 


4. 绝对 定位 元 素 


如 果 元 素 的 position 属 性 为 absolute， 那 么 它 的 包含 块 是 由 最 近 的 
position 属 性 不 为 static 的 祖先 元 素 。 这 里 的 祖先 元 素 可 以 是 块 元 素 ， 也 
可 以 是 行内 元 叉 。 


从 上 面 我 们 知道 ， 绝 对 定位 元 素 是 根据 其 包含 块 来 定位 的 ， 这 个 包 
含 块 是 离 它 最 近 的 position 属 性 不 为 static 的 祖先 元 素 。 如 果 绝 对 定位 元 
素 找 不 到 position 属 性 不 为 static 的 祖先 元 素 ， 则 它 的 包含 块 是 根 元 素 
Chtml 元 素 ) 。 现 在 我 们 知道 为 什么 在 默认 情况 下 ， 绝 对 定位 元 素 是 相 
对 浏览 喜 窗 口 来 定位 的 了 吧 ? 


对 于 包含 块 的 范围 ， 我 们 也 分 两 种 情况 考虑 。 


C1) 如果 祖先 元 素 是 块 元 素 ， 则 包含 块 的 范围 为 祖先 元 素 的 
padding edge 形 成 。 


(2) 如 果 祖 先是 行内 元 素 ， 则 包含 块 取决 于 祖先 元 素 的 direction 属 




















当 祖 先 为 行内 元 素 时 ， 包 含 块 的 范围 判定 比较 复杂 ， 而 且 也 没 多 少 
用 处 ， 此 处 不 详细 展开 ， 可 以 参考 : http://www.w3help.org/zh- 
cn/kb/008/。 


在 “深入 定位 ?这 一 节 提 到 的 “绝对 定位 元 素 是 相对 于 外 层 第 一 个 设 
置 了 ‘position:relative;”‘position:absolute;’ 或 ‘position:fixed’? 的 祖先 元 素来 
进行 定位 的 。” 其 实 就 是 跟 绝对 定位 元 素 的 包含 块 有 关 。 





14.3 ” 技 登 上 下 文 


层 合 上 下 文 也 许 我 们 比较 少 接触 ， 但 这 却 是 一 个 非常 重要 的 概念 。 
理解 层 登 上下文， 不 仅 可 以 帮助 我 们 深入 理解 z-index 对 元 素 堆 全 顺序 的 
控制 ， 而 且 对 于 我 们 深入 理解 浮动 和 定位 也 古 非常 重要 的 。 这 一 节 我 们 
只 针对 CSS2.1 而 言 ， 对 于 CSS3 新 环境 下 层 登 上 下 文 的 变化 ， 我 们 不 在 
此 展开 介绍 。 


在 这 一 节 ， 我 们 需要 认真 理解 两 个 概念 


(1) 层 登 上 下 文 (stacking context) 。 








(2) 层 羞 级别 (stacking level) 。 
14.3.1 什么 是 层 合 上 下 文 ? 

层 登 上 和 下文， 是 HTML 中 的 一 个 三 维 的 概念 。 从 *z-index 属 性 ?这 一 
节 我 们 知道 ， 虽 然 一 个 网 页 是 平面 的 ， 但 实际 上 网 页 是 三 维 结构 ， 除 了 
x 轴 、y 轴 ， 它 还 有 z 轴 。z 轴 往往 都 是 用 来 设 定 层 的 先后 顺序 的 。 

层 闭 上 下 文 跟 块 级 格式 上 下 文 (BFC) 相似， 是 可 以 创建 出 来 的 。 
也 就 是 说 ， 跟 创建 BFC 一 样 ， 你 可 以 在 CSS 中 添加 一 定 的 属性 来 将 某 个 
元 素 创 建 一 个 层 琶 上 下 文 出 来 。 


如 宁 一 个 元 素 具 备 以 下 任何 一 个 条 件 《〈 不 考虑 CSS3) ， 则 该 元 象 
会 创建 一 个 新 的 层 琶 上 下 文 。 


(1) 根 元 素 。 

(2) z-index 不 为 auto 的 定位 元 素 。 

这 里 注意 一 下 ， 根 元 素 会 创建 一 个 层 辣 上 下 文 ， 我们 称 之 为 “ 根 层 
登 上 下 文 ”。 这 个 与 根 元 素 创 建 一 个 BFC 是 一 样 的 。 对 于 根 层 登 上 下 
文 ， 没 什么 好 讲 的 。 

从 上 面 我 们 知道 ， 如 果 我 们 想 要 创建 一 个 新 的 层 倒 上 和 下文， 也 就 只 




















有 一 个 途径 了 





z-index 属性 。 
14.3.2 什么 是 层 装 级 别 ? 

层 登 级 别 ， 即 stacking level。 从 上 面 我 们 知道 ， 可 以 使 用 z-index 属 
性 为 一 个 元 素 创建 一 个 新 的 层 辣 上 下 文 。 但 一 个 元 素 往往 会 有 背景 色 、 
0 定位 子 元 素 等 ， 那 么 这 些 东西 又 是 遵循 着 怎样 的 顺序 来 堆 
登 的 呢 ? 

同一 个 层 登 上 下 文 的 背景 色 以 及 内 部 元 素 ， 谁 在 上 谁 在 下 ， 这 些 都 
是 由 层 登 级 别 ?来 决定 的 。 也 就 是 说 ， 层 有 登 级 别 是 针对 同一 个 层 倒 上 下 
文 而 言 的 。 层 登 级 别 与 层 倒 上下文， 是 两 个 不 同 的 概念 ， 大 家 要 认真 理 
解 好 。 

在 同一 个 层 合 上 下 文中 ， 层 合 级 别 从 低 到 高 排列 ， 如 图 14-1 所 示 。 


(1) 背景 和 边框 ( 父 级 ) : 也 就 是 当前 层 车 上 下 文 的 背景 和 边 
框 。 


(2) 负 z-index: z-index 为 负 值 的 “内 部 元 素 ”。 
(3) 块 盒子 : 普通 文档 流下 的 块 盒子 (block-level box) 。 


(4) 浮动 盒子 : 非 定位 的 浮动 元 素 〈( 也 就 是 排除 了 position:relative 
的 浮动 盒子 ) 。 


(5) 行内 盒子 : 普通 文档 流下 的 行内 盒子 (inline-level box) 。 
(5) z-index:0: z-index 为 0 的 “内 部 元 素 ”。 
(6) 正 z-index: z-index 为 正 值 的 “内 部 元 素 ”。 


正 z-index 





图 14-1 同一 层 合 上 下 文中 的 “ 层 盖 级 别 ” 
从 上 图 我 们 可 以 得 到 以 下 结论 。 


(1) 除了 “背景 和 边框 ”这 一 条 是 当前 层 登 上下文 之 外 ， 其 他 的 部 
是 针对 当前 层 著 上 下 文 内 部 的 元 素 。 


(2) 关于 块 盒子 (block-level box) 和 行内 盒子 (inline-level 
box) ， 我 们 在 下 一 节 “BFC 和 IFC” 中 会 给 大 家 人 介绍。 注意 ，inline-block 
元 素 不 是 块 盒子 ， 而 是 行内 盒子 。 


(3) 父 元 素 内 部 的 元 素 〈 即 后 代 元 素 ) ， 如 果 它 是 一 个 z-index 取 
值 不 为 auto 的 定位 元 素 ， 则 这 个 元 素 会 创建 新 的 层 登 上 下 文 。 不 过 这 个 
由 内 部 元 素 创 建 的 层 骆 上 下 文 依旧 属于 父 层 骆 上 下 文 的 一 部 分 。 也 就 是 
说 ， 层 秦 上 下 文 是 可 以 租 套 的 ， 内 部 元 素 所 创建 的 层 堵 上 下 文 均 受 制 于 
父 元 素 创 建 的 层 倒 上 下 文 。 


这 里 问 大 家 一 个 问题 ， 为 什么 行内 元 素 的 层 闭 级 别 要 比 浮动 元 素 和 
块 元 素 的 高 呢 ? 我 明明 感觉 浮动 元 素 和 块 元 素 要 更 高 一 点 啊 。 我 们 先 来 
看 一 个 分 析 图 如 图 14-2 所 示 。 

















4 
边 椎 和 背景 


一 一 和 
+ 
We :+ 
图 14-2 层 炙 级 别 分 析 图 
背景 和 边框 一 般 为 准 饰 属性 ， 所 以 层 巷 级 别 最 低 。 浮 动 元 素 和 块 元 


素 一 般 用 作 布 局 ， 而 行内 元 素 痢 是 内 容 。 对 于 一 个 页 面 来 说 ， 最 重要 的 
当然 是 内 容 。 因 此 ， 一 定 要 让 内 容 的 层 登 级 别 相当 高 。 


14.3.3 ” 层 共 上 下 文 的 特点 


一 个 元 素 在 z 轴 方 辐 上 的 堆 合 顺序 ， 是 由 “ 层 登 上下文"? 和“ 层 全 级 
别 ” 这 两 个 因素 决定 的 : 


(1) 同一 个 层 琶 上 下 文中 ， 我 们 比较 的 是 “内 部 元 素 层 倒 级 别 ”。 
层 合 级 别 大 的 元 系 显 示 在 上 ， 层 全 级 别 小 的 元 素 显 示 在 下 。 


(2) 同一 个 层 合 上 下 文中 ， 如 果 两 个 元 了 系 的 层 登 级别 相 同 〈 即 z- 
nn 
”原则 。 


(3) 不 同 的 层 且 上下文 中， 我 们 比较 的 是 “ 父 级 元 素 层 过 级 别 ”。 
元 素 显 示 顺 序 以 “ 父 级 层 登 上下文 ”的 层 舍 级 别 来 决定 显示 的 先后 顺序 ， 
与 自身 的 层 登 级别 无 关 。 





























举例 : 


<!IDOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 
{ 
width:466pX; 
height:266pX; 
border:1px solid gray 
padding:16pX; 


} 
img{float:1left;} 
#content{background-color:#FFACAC;} 
</style> 
</head> 
<body> 
<div id= Wer > 
<img src="images/ailianshuo.png" alt=" 
<div id="content"> 水 陆 草 木 之 花 ， 可爱 者 其 六、 晋 陶渊明 独 爱 菊 。 
</div> 
</body> 
</html> 





在 浏览 絮 预 换 效 果 如 图 14-3 所 示 。 









要 水 陆 草木 之 花 ， 可 爱 者 其 其 。 亚 陶渊明 
二 独 爱 菊 。 自 李 唐 来 ， 世 人 其 爱 竺 丹 。 子 
' 中 “ 独 爱 鞍 之 出 汶 泥 而 不 染 ， 浴 清 尘 而 不 





妹 ， 中 通 外 直 ， 不 莫不 枝 ， 香 远 蔓 清 ， 
字 享 浪 植 ， 可 远 观 而 不 可 订 玩 二 。 地 谓 
病 ， 花 之 陷 介 者 也 ， 怕 丹 ， 花 之 富有 
he ~ ， 莲 ， 花 之 君子 者 也 。 嘲 ! 菊 之 爱 ， 
网 后 鲜 有 闻 ， 赴 之 要 周子 者 何人 ? 牡丹 之 爱 ， 置 洗 众 














图 14-3 ”浮动 引起 的 文字 环绕 效果 


由 
车 


一 个 元 素 浮 动 之 后 ， 它 的 层 闭 级 别 比 普通 文档 流 的 块 级 盒子 的 层 羞 
级 别 要 高 。 此 时 浮动 元 素 会 “ 浮 ” 到 上 面 去 ， 脱 离 文档 流 。 三 维 立 体 分 析 
图 如 图 14-4 所 示 。 





图 14-4 浮动 引起 的 文字 环绕 效果 分 析 图 


这 就 是 浮动 的 效果 ， 大 家 一 定 要 回顾 “浮动 布局 ”这 一 半 中 的 例子 ， 
结合 层 营 、 深 入 理解 ， 便 能 了 解 其 中 奥秘 。 


14.4 BEFC 和 IEC 


14.4.1 基本 概念 


在 CSS 中 ， 页 面 中 任何 一 个 元 素 都 可 以 看 成 是 一 个 盒子 。 在 普通 文 
档 流 (normal fow) 中， 盒子 会 参与 一 种 格式 上 下 文 (formatting 
context) 。 这 个 盒子 可 能 是 块 盒子 (block-level box) ， 也 可 能 是 行内 盒 
子 (inline-level box) 。 一 个 盒子 只 能 是 块 盒 子 或 者 是 行内 盒子 ， 不 能 
同时 是 块 盒 子 又 是 行内 盒子 。 其 中 块 盒子 参与 BFC 〈 块 级 格式 上 下 
文 ) ， 行 内 盒子 参与 IFC〈 行 级 格式 上 下 文 ) 。 














1. 格式 上 下 文 (formatting context) 


格式 上 下 文 是 W3C CSS2.1 规范 中 的 一 个 重要 概念 。 它 指 的 是 页 面 
中 的 一 块 演 染 区 域 ， 并 有 旦 这 个 格式 上 下 文 有 一 套 自己 的 演 染 规则 。 格 式 
上 下 文 决定 了 其 内 部 元 素 将 如 何 定位 ， 以 及 和 其 他 元 素 之 间 的 关系 。 
格式 上 下 文 有 两 种 。 


(1) 块 级 格式 上 下 文 (Block Formatting Context，BEFC) 。 





(2) 行 级 格式 上 下 文 (Inline Formatting Context，IFC) 。 


2. 盒子 (box) 








盒子 ， 又 称 CSS 盒 子 ， 是 CSS 布 局 的 基本 单位 。 人 简单 来 说 ， 一 个 页 
面 就 是 由 很 多 个 盒子 组 成 的 〈 有 具体 请 参考 CSS 盒 子 模型 ) 。 元 素 的 类 型 
和 display 属 性 决定 了 盒子 的 类 型 。 不 同类 型 的 盒子 ， 会 参与 不 同 的 格式 
上 下 文 。 表 14-2 列 出 了 常见 的 display 属 性 。 








表 14-2 常见 的 display 属 性 取 值 











inline 行内 元 素 


inline-block 行内 块 元 素 
人 





eg 
table-cell 以 表格 单元 格 形式 显示 ， 类 似 于 td 元 素 


上 面 已 经 提 到 了 ， 盒 子 的 类 型 一 般 有 “ 块 盒子 "和 “行内 盒子 ”这 两 





种 。 
(1) 块 盒子 。 


块 盒子 ， 即 block-level box。 元 素 类 型 〈 即 display 属 性 ) 为 block、 
table、list-item 的 元 素 ， 会 生成 块 盒子 。 


块 盒子 会 参与 块 级 格式 上 下 文 。 也 就 是 说 ， 元 素 类 型 为 block、 
table、list-item 的 元 素 都 会 参与 块 级 格式 上 下 文 (BFC) 。 


(2) 行内 盒子 。 


行内 盒子 ， 即 inline-level box。 元 素 类 型 ( 即 display 属 性 ) 为 
inline、inline-block、inline-table 的 元 素 ， 会 生成 行内 盒子 。 


行内 盒子 会 参与 行 级 格式 上 上下文。 也 就 是 说 ， 元 素 类 型 为 inline、 
inline-block、inline-table 的 元 素 都 会 参与 行 级 格式 上 下 文 (IFC) 。 


除了 block-level box 和 inline-level box 这 两 种 盒子 ， 在 CSS 中 还 有 一 


个 run-in box 盒 子 。 不 过 run-in box 是 CSS3 新 增 的 ， 在 此 不 介绍 。 
14.4.2 ”什么 是 BFC 


BFC， 全 称 Block Formatting Context( 块 级 格式 上 下 文 )。 它 是 一 
个 独立 的 泻 染 区 域 ， 只 有 块 盒子 (block-level box) 参与 。 块 级 格式 上 
0 内 部 的 块 盒子 是 如 何 布局 的 ， 并 且 这 个 泻 染 区 域 与 外 部 区 域 
坚 不 相 关 。 





1 如何 创建 BFC 


W3C 标 准 中 对 BFC 的 定义 : 浮动 元 素 ， 绝 对 定位 元 素 (position 为 
absolute 或 fixed) ， 元 素 类 型 〈 即 display 属 性 ) 为 inline-block、table- 
caption、table-cell， 以 及 overflow 属 性 不 为 visible 的 元 素 将 会 创建 一 个 新 
的 块 级 格式 上 下 文 (BFC) 。 


如 傈 一 个 元 素 具 备 以 下 任何 一 个 条 件 ， 则 该 元 素 都 会 创建 一 个 新 的 
BEFC 。 


(1) 根 元 素 。 


(2) float 属 性 除了 none 以 外 的 值 ， 也 束 
是 “float:left* 和 “float:right”。 


(3) position 属 性 除了 static 和 relative 以 外 的 值 ， 也 就 


是 “position:absolute” 和 “position:fixed”。 


(4) overflow 属 性 除了 visible 以 外 的 值 ， 也 就 


是 “overflow:auto”“overflow:hidden” 和 “overflow:scroll”。 


(5) 元 系 类 型 〈 即 display 属 性 ) 为 inline-block、table-caption、 
table-cell。 


也 就 是 说 ， 如 果 我 们 要 创建 一 个 新 的 BFC， 只 需要 在 CSS 中 添加 上 
面 任意 一 个 属性 即 可 。 创 建新 的 BFC 可 以 帮助 我 们 解决 很 多 问题 ， 下 面 
我 们 会 详细 介绍 。 这 里 要 注意 一 下 ， 根 元 素 也 会 创建 BFC， 在 默认 情况 
下 一 个 页 面 中 所 有 的 元 素 都 处 于 同一 个 BFC 中 。 这 是 默认 的 ， 不 需要 我 
们 去 设置 。 不 过 理解 这 一 点 对 于 我 们 后 面 理解 很 多 东西 十 分 重要 。 虽 然 














这 些 属 性 都 可 以 创建 BFC， 但 是 也 会 产生 一 些 效果 。 


1) float:left 和 foat:right 会 将 元 素 移 到 左边 或 右边 ， 并 被 其 他 元 素 
环绕 。 


(2) overflow:hidden 会 将 超出 元 素 的 内 容 隐 藏 。 
(3) overflow':scroll 会 产生 多 余 的 滚动 条 。 


C4) display:table 可 能 引发 啊 应 性 问题 。 


因此 如 果 我 们 要 创建 一 个 BFC， 一 定 要 根据 需求 来 选择 最 恰当 的 属 
人 


这 里 要 注意 一 下 ， 类 型 为 人 ex 和 inline-flex 的 元 素 也 会 创建 BFC， 只 
不 过 这 些 是 CSS3 的 内 容 ， 我 们 在 此 忽略 。 此 外 根据 定义 ， 类 型 为 
block、table 的 元 素 不 会 创建 BFC。 小 伙伴 们 可 能 就 有 疑问 了 ， 为 什么 
block 类 型 元 素 不 会 创建 BFC 啊 ?最 开始 提 到 : 元 素 类 型 〈 即 display 属 
性 ) 为 block、table、1list-item 的 元 素 ， 会 生成 块 盒 子 (block-level 
box) ， 然 后 块 盒子 会 参与 BFC。 其 实 从 这 句 话 我 们 已 经 得 到 明确 答案 
了 : block、table、list-item 等 类 型 的 元 素 的 是 参与 BFC， 而 不 是 创建 
BFC。 





2. BFC 的 特点 


W3C 标 准 描述 BFC 的 特点 共有 两 条 : 


(1) 在 一 个 BFC 中 ， 盒 子 从 顶端 开始 垂直 一 个 接着 一 个 地 排列 ， 
两 个 相 邻 盒子 之 间 的 垂直 间距 由 margin 属 性 决定 。 在 同一 个 BFC 中 ， 两 
个 相 邻 块 盒子 之 间 垂 直方 同上 的 外 边 距 会 车 加 。 

(2) 在 一 个 BFC 中 ， 每 一 个 盒子 的 左 外 边界 (margin-left) 会 紧 贴 
着 容器 的 左边 (border-left) 《对 于 从 石 到 左 的 格式 化 ， 则 相反 〉， 即 
使 存在 浮动 元 素 也 是 如 此 。 


从 上 面 的 WwW3C 标 准 定 义 ， 我 们 可 以 得 出 以 下 几 点 重要 结论 〈 非 常 重 











要 ， 请 字 其 句 酌 地 理解 记忆 〉。 


(1) 在 一 个 BFC 内 部 ， 盒 子 会 在 垂直 方向 上 一 个 接着 一 个 地 排 
列 。 


(2) 在 一 个 BFC 内 部 ， 相 邻 的 margin-top 和 margin-bottom 会 登 加 。 


(3) 在 一 个 BFC 内 部 ， 每 一 个 元 素 的 左 外 边界 会 紧 贴 着 包含 盒 
的 左边 ， 即 使 存在 浮动 也 是 如 此 。 


(4) 在 一 个 BFC 内 部 ， 如 果 存 在 内 部 元 素 是 一 个 新 的 BFC， 并 且 
存在 内部 元 素 古 浮动 元 素 。 则 该 BFC 的 区 域 不 会 与 float 元 素 的 区 域 重 











(5) BFC 束 是 页 面 上 的 一 个 隔离 的 合子， 该 盒子 内 部 的 子 元 系 不 
会 影响 到 外 面 的 元 系 。 


(6) 计算 一 个 BFC 的 高 度 时 ， 其 内 部 译 动 元 素 的 高 度 也 会 参与 计 








有 些 新 手 觉得 很 奇怪 ， 为 什么 在 一 个 BFC 中 ， 盒 子 会 在 垂直 方向 上 
一 个 接着 一 个 排列 呢 ? 如 果 在 一 个 BFC 中 有 一 个 盒子 是 span 这 种 行内 元 
素 ， 岂 不 是 不 符合 了 ? 再 次 提醒 一 下 ， 能 够 参与 BFC 中 的 盒子 是 块 盒子 
(block-level box) 。 就 算 在 这 个 BFC 中 存在 一 个 行内 元 素 ， 这 个 行内 元 
素 参 与 的 是 IFC 而 不 是 BFC， 别 搞 泥 了 。 








14.4.3 BFC 的 用 途 


上 面 给 大 家 介绍 了 BFC 的 特点 以 及 如 何 创建 一 个 新 的 BFC。 说 了 那 
么 多 ， 那 BFC 究 竟 有 什么 用 呢 ? BFC 的 用 途 很 多 ， 常 见 的 有 三 个 。 


(1) 创建 BFC 来 避免 垂直 外 边 距 登 加 。 
(2) 创建 BFC 来 清除 浮动 。 
(3) 创建 BFC 来 实现 自 适 应 布局 。 





1. 创建 BFC 来 避免 垂直 外 边 距 谷 加 


在 之 前 的 章节 里 已 经 给 大 家 详细 介绍 过 了 外 边 距 闭 加 的 问题 。 外 边 
距 疼 加 ， 人 准确 地 说 ， 是 在 同一 个 BFC 中 ， 两 个 相 邻 的 margin-top 和 
margin-bottom 相 遇 时 ， 这 两 个 外 边 距 将 会 合并 为 一 个 外 边 距 ， 即 “二 变 
一 *”。 其 中 ， 对 加 之 后 的 外 边 距 高 度 等 于 发 生姜 加 之 前 的 两 个 外 边 距 中 
最 大 值 。 之 所 以 垂直 外 边 距 会 发 生 车 加 ， 其 实 这 都 是 BFC 的 特点 。 学 到 
这 里 ， 相 信 大 家 都 会 有 “柳暗花明 又 一 村 ”的 感觉 。 





上 


<“!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 


width:260px; 
border:1px solid gray; 
overflow:hidden;/* 创 建 一 个 新 的 BFC*/ 








} 
#a,#b 
{ 
height:66px; 
line-height:66px; 
text-align:center; 
font-size:38px; 
color:White; 
background-color:Purple; 
} 
#a{margin-bottom: 26px;} 
#b{margin-top:36px;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="a">A</div> 
<div id="b">B</div> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 几 14-5 所 示 。 


A 
A 


B 





图 14-5 ”垂直 外 边 距 堆 加 


分 析 : 


在 这 个 例子 中 ， 我 们 使 用 “overflow:hidden” 为 父 元 素 创 建 一 个 
BFC， 也 就 是 说 父 元 素 是 一 个 BFC 了 。 因 此 A 和 B 位 于 同一 个 BFC 中 。 


A 的 margin-bottom 为 20px，B 的 margin-top 为 30px。 由 于 在 同一 个 
BFC 中 ， 相 邻 两 个 盒子 的 牌 直 外 边 距 会 辣 加 ， 因 此 A 和 B 的 垂直 距离 为 
30pX。 


细心 的 小 伙伴 们 就 有 疑问 了 : 我 不 给 父 元 素 添 
加 “overflow:hidden” 来 创建 新 的 BFC， 王 直 外 边 距 也 会 发 生 羞 加， 这 是 
什么 情况 ?大 家 别 忘 了 根 元 素 本 和 丑 就 是 一 个 BFC， 如 果 我 们 没有 为 父 元 
素 创 建 BFC， 则 默认 情况 下 A 和 B 就 是 处 于 根 元 素 的 BFC 中 。 


在 实际 开发 中 ， 如 果 我 们 想 要 避免 生 直 外 边 距 闭 加 ， 怎 么 办 呢 ? 根 
据 第 二 个 结论 “同一 个 BFC 中 ， 相 邻 的 margin-top 和 margin-bottom 会 登 
加 ”， 既 然 相 邻 的 margin-top 和 margin-bottom 必 须 处 于 同一 个 BFC 才 会 发 
生 著 加 ， 那 么 我 们 把 这 两 个 元 素 放 在 不 同 的 BFC 中 ， 束 可 以 解决 了 。 




















举例 : 


<!1DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 
{ 
width:260px; 
border:1px solid gray; 
overflow:hidden;/* 创 建 一 个 BFC*/ 





} 
#bfc-box 


{ 


} 
#a,#b 


{ 





overflow:hidden;/* 创 建 一 个 BFC， 避 免 外 边 距 疼 加 */ 


height:68px; 
line-height:66px; 
text-align:center; 
font-size:308px; 
color:White; 
background-color:Purple; 
} 
#a{margin-bottom: 26px;} 
#b{margin-top:36px;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="a">A</div> 
<div id="bfc-box"> 
<div id="b">B</div> 
</div> 
</div> 
</body> 
</html> 





在 浏览 器 预 宽 效 果 如 如 图 14-6 所 示 。 





图 14-6 ”创建 BFC 避 免 
垂直 外 边 距 闭 加 


分 析 : 


在 这 个 例子 中 ，A 和 B 处 于 不 同 的 BFC， 其 中 A 处 于 #wrapper 元 素 的 
BFC 中 ，B 处 于 #bfc-box 元 素 的 BFC 中 ， 所 以 不 会 发 生 垂 直 外 边 距 着 加 。 
这 里 注意 一 下 ， 假 如 我 们 不 给 #bfc-box 元 素 添加 “overflow:hidden”，A 和 
B 也 会 发 生 垂直 外 边 距 琶 加 。 此 时 A 和 B 都 不 属于 相 邻 的 元 素 ， 它 们 为 什 
么 还 会 发 生 外 边 距 登 加 呢 ? 


我 们 再 来 看 看 第 二 个 结论 “同一 个 BFC 中 ， 相 邻 的 margin-top 和 
margin-bottom 会 登 加 ”， 这 里 的 相 邻 不 是 指 “ 相 邻 的 兄弟 元 素 "， 而 是 指 
相 邻 的 margin-top 和 margin-bottom 。 











2. 创建 BFC 来 清除 浮动 
(1) BFC 包 含 浮动 。 


我 们 都 知道 可 以 使 用 “overflow:hidden” 来 清除 浮动 ， 但 很 少 知道 为 
什么 。 根 据 第 六 个 结论 “计算 BFC 的 高 度 时 ， 其 内 部 浮动 子 元 素 的 高 度 
会 参与 计算 "可 以 知道 ， 如 果 一 个 元 素 是 一 个 BFC， 则 计算 该 元 素 高 
度 的 时 候 ， 内 部 浮动 子 元 素 的 高 度 也 得 算 进 去 。 











举例 : 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 
{ 
width :266pX; 
border: 1px solid black; 
} 


#first,#second 


{ 
width:86px; 


height:46px; 
border:1px solid red; 


} 
#first{float:left;} 


#second{float:right;} 
</style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="first"></div> 
<div id="second"></div> 
</div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 4-7 所 示 。 


[i 


图 14-7 浮动 引起 的 父 元 素 高 度 塌陷 








在 这 个 例子 中 ， 由 于 父 元 素 没有 定义 高 度 ， 因 此 父 元 素 无 法 把 浮动 
子 元 素 包 衷 起 来 ， 这 就 会 造成 父 元 素 高 度 塌 陷 。 如 有 果 我 们 给 父 元 素 添 
加 “overflow:hidden”， 在 浏览 器 预览 效果 如 图 14-8 所 示 。 


| 


图 14-8 创建 BFC 来 清除 浮动 


这 是 因为 “overflow:hidden” 使 得 父 元 素 变 成 了 一 个 BFC， 由 于 BFC 
在 计算 它 自 身高 度 的 时 候 ， 会 把 浮动 子 元 素 的 高 度 算 进去 ， 因 此 最 终 父 
元 素 的 高 度 等 于 浮动 子 元 素 的 高 度 。 此 时 就 相当 于 清除 了 浮动 。 当 然 我 
们 也 可 以 通过 给 父 元 素 添加 “display:inline-block”“float:left” 等 来 创建 新 
的 BFC 来 实现 浮动 的 清除 。 


创建 BFC 的 方式 很 多 ， 上 面 已 经 详细 给 大 家 介绍 了 。 不 过 也 明确 说 
过 ， 不 同 的 属性 会 有 不 同 的 副作用 。 像 这 个 例子 ， 如 果 使 
用 “overflow:scroll” 确 实 是 可 以 清除 浮动 ， 但 是 却 无 缘 无 故地 增加 了 滚动 
条 ， 这 就 不 是 我 们 想 要 的 效果 了 (大 家 可 以 目 行 试 试 ) 。 因 此 如 果 我 们 
要 创建 一 个 BFC， 一 定 要 根据 需求 来 选择 最 恰当 的 属性 。 


(2) BFC 避 免 文 字 环 经 。 


有 了 时 浮动 div 劳 边 的 文本 会 环绕 它 〈 如 图 14-9 所 示 〉 ， 但 是 有 时 候 我 
们 想 要 如 图 14-10 的 效果 ， 我 们 可 以 通过 创建 BFC 来 实现 。 



































浮动 元 素 文字 


图 14-9 ”文字 环绕 效果 


浮动 元 素 _ 


图 14-10 ”预期 效果 


举例 : 


< IDOCTYPE html> 
<htm] xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#wrapper 
{ 
width:466pX; 
height:266pX; 
border:1px solid gray 
padding:16pX; 


} 
img{float:1left;} 
#content{background-color:#FFACAC;} 
</style> 
</head> 
<body> 
<div id= 人 "> 
<img src="images/ailianshuo.png" alt=" 


<div id="content" > 水陆 草木 之 花 ， 亲爱 者 其 着 晋 陶渊明 独 爱 菊 。 
</div> 
</body> 
</html> 





在 浏览 器 预 儿 效果 如 图 14-11 所 示 。 









水 陆 草 木 之 花 ， 可 爱 者 其 其 。 亚 陶渊明 
8 独 爱 菊 。 自 李 唐 来 ， 世人 其 爱 牡丹 。 人 
溉 受 秆 之 出 洲 训 而 个 类， TT 
妖 ， 中 通 外 直 ， 不 
亭 净 植 ， 可 先 观 而 不 可 筑 玩 震 。 子 谓 
莉 ， 花 之 隐 交 者 也 ; 牡丹 ， 花 之 富贵 者 


hem ~ ， 莲 ， 花 之 君子 者 也 。 路! 区 之 爱 ， 
ee 莲 之 爱 ， 3 守信 家 宜 乎 众 


















图 14-11 浮动 引起 的 文字 环绕 效果 


分 析 : 


根据 层 合 上 下 文 的 知识 我 们 知道 ,一 个 元 素 浮 动 之 后 ， 它 的 层 巷 级 
别 (stacking level〉 比 普通 文档 流 的 块 级 盒子 的 层 苔 级 别 要 高 。 此 时 浮 
动 元 素 会 “ 浮 ” 到 上 面 去 ， 脱 离 文 档 流 ， 如 图 14-12 所 示 。 





图 14-12 ”浮动 引起 的 文字 环绕 效果 分 析 图 


在 这 个 例子 中 ， 我 们 为 #content 元 素 添 加 “overflow:hidden”， 此 时 
#content 元 素 变 成 了 一 个 新 的 BFC， 在 浏览 器 预览 效果 如 图 14-13 所 示 。 








图 14-13 ”创建 BFC 和 避免 文字 环绕 


根据 第 四 点 结论 : 在 一 个 BFC 内 部 ， 如 果 存 在 内 部 元 素 是 一 个 新 的 
BFC， 并 且 存 在 内 部 元 系 是 浮动 元 素 ， 则 该 BFC 的 区 域 不 会 与 float 元 素 
的 区 域 重 过。 


3. 使 用 BFC 创 建 自 适应 两 列 布局 


目 适 应 两 列 布局 ， 指 的 是 在 左右 两 列 中 ， 其 中 有 一 列 的 宽度 为 目 适 
应 ， 另 外 一 列 宽度 是 固定 的 。 在 之 前 的 章节 中 ， 我 们 介绍 过 使 用 负 
margin 技 术 来 实现 目 适 应 左右 两 列 布局 。 这 里 我 们 介绍 妃 外 一 种 实现 方 
式 ， 那 就 是 使 用 BFC 创 建 目 适 应 两 列 布局 。 











举例 : 


<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
#sidebar 


float:1left; 
width:160px; 
height:156pX; 
background:#FF6666; 
} 
#content 


{ 


height:266pX; 
background-color:#FFCCCC; 


} 
</style> 
</head> 
<body> 
<div id="sidebar"></div> 
<div id="content"></div> 
</body> 
</html> 





在 浏览 器 预览 效果 如 图 14-14 所 示 。 


iw localhost:1080/tesyHT Xx \ 


(a localhost:1080/test/HTM 





图 14-14 ”浮动 引起 的 元 素 窗 盖 效 果 


分 析 : 


根据 层 闭 上 下 文 的 知识 我 们 知道 ,一 个 元 素 浮 动 之 后 ， 它 的 层 车 级 
别 (stacking level) 比 普 通 文档 流 的 块 级 盒子 的 层 登 级 别 要 高 。 此 时 浮 
动 元 素 会 “ 浮 ” 到 上 面 去 ， 脱 离 文档 流 ， 如 图 14-15 所 示 。 








图 14-15 ”浮动 引起 的 元 素 覆 盖 效 果 分 析 图 
上 上 面 的 预 虎 结 末 ， 刚 好 满足 了 结论 的 第 三 点 “在 一 个 BFC 中 ， 内 部 





0 


在 这 个 例子 中 ， 我 们 为 #ontent 元 素 添 加 “overflow:hidden”， 此 时 


#content 元 素 变 成 了 一 个 新 的 BFC， 在 浏览 器 预览 效果 如 图 14-16 所 示 。 


Ww localhost1080/test/HT! x 


(2 localhost:1080/test/HTM 








图 14-16 ”创建 BFC 创 建 自 适应 两 列 布局 


我 们 改变 浏览 器 的 蜗 度 ， 就 很 容易 可 以 看 出 上 自 适 应 左右 两 列 布局 实 
际 效果 是 怎样 的 。 这 个 例子 跟 “BFC 避 人 免 文字 环绕 ”的 例子 是 一 样 的 道 
0 











这 一 节 的 内 容 非常 复杂 ， 很 多 东西 大 家 一 下 子 理解 不 来 。 不 过 没 关 
系 ， 回 头 多 看 几 次 驶 行 。 此 外 ， 对 于 BFC 和 IFC 这 些 概念 的 学 习 ， 我 们 
应 该 去 寻找 官方 的 定义 ， 因 为 这 是 最 权威 和 最 准确 的 。 








局 到 





看 到 这 里 ， 相 信 小 伙伴 们 在 HTML 和 CSS 方 面 已 经 走 了 很 远 。 本 书 
是 我 多 年 开发 的 心血 总 结 ， 基 本 守 无 保留 地 分 享 出 来 。 这 也 是 希望 小 伙 
伴 们 少 走 弯路 ， 在 前 端 之 路 走 得 更 快 更 远 。 人 生 兰 短 ， 时 间 更 多 应 该 用 
来 追逐 自己 喜欢 的 东西 ， 而 不 是 在 一 些 弯 路 上 白白 浪费 。 


从 入 门 到 进 阶 ， 大 家 已 经 系统 学 了 一 裔 HTML 和 CSS 的 基础 知识 和 
开发 技巧 。 接 下 来 ， 就 看 我 们 在 实际 开发 中 怎么 运用 了 。 在 进 阶 的 学 习 
中 ， 当 你 为 那些 高 级 技巧 所 折服 时 ， 还 是 要 认真 说 一 句 : HTML 和 CSS 
进 阶 注重 的 并 不 是 学 到 了 多 少 开发 技巧 ， 而 是 学 会 了 代码 规范 以 及 性 能 
优化 等 ， 毕 竟 网 站 的 性 能 与 可 维护 性 是 才 是 最 重要 的 。 


在 HTML 和 CSS 进 阶 的 学 习 i 我 们 应 该 都 清楚 地 知道 ; 每 一 门 
Web 技 术 都 不 简单 ， 我 们 平常 应 该 深入 地 去 学 习 技巧 和 提高 技能 。 别 每 
次 一 出 问题 就 赖 浏览 器 有 bug。 事 实 上 ， 浏 览 器 倒 不 会 有 bug， 而 是 你 的 
心态 有 bug。 


学 完 HTML 和 CSS 进 阶 ， 建 议 大 家 下 一 步 先 去 学 习 CSS3 的 内 容 。 
CSS3 相 当 强 大 ， 可 以 实现 非常 棒 的 效果 ， 一 定 要 去 看 看 。 此 外 ， 平 常 
我 们 也 应 该 多 查看 大 型 互联 网 公司 的 源 代 码 ， 就 算 你 会 做 ， 也 可 以 从 中 
学 到 很 多 东西 。 我 们 常 说 注重 实践 ， 其 实 通过 查看 别人 的 源码 来 学 习 ， 
也 是 实践 的 一 部 分 。 


当然 ， 通 过 本 书 我 们 只 是 学 习 了 HTML 和 CSS。 然 而 Web 前 端 开发 
技术 远 不 止 这 些 ， 如 果 小 伙伴 们 想 要 成 为 一 名 合格 的 前 端 开发 人 员 ， 我 
们 接 下 来 要 学 习 更 多 前 端 技术 ， 例 如 JavaScript、jQuery、HTIML5、 
CSS3 等 。 对 于 更 多 的 前 端 技 术 ， 可 以 到 绿叶 学 习 网 
《http://www.lvyestudy.com) 或 发 邮件 〈lvyestudy@foxmailcom ) 与 我 


py Pa 
父 瑰 。 























欢迎 来 到 异步 社区 ! 


异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn) 是 人 民 邮 电 出 版 社 旗 下 IT 专 业 图 书 旗 
舰 社 区 ， 于 2015 年 8 月 上 线 运营 。 


异步 社区 依托 于 人 民 邮 电 出 版 社 20 余 年 的 I 专业 优质 出 版 资源 和 编 
得 策划 团队 ， 打 造 传统 出 版 与 电子 出 版 和 自 出 版 结合 、 纸 质 书 与 电子 书 
结合 、 传 统 印 刷 与 POD 按 需 印刷 结合 的 出 版 平台 ， 提 供 最 新 技术 资讯 
为 作者 和 读者 打造 交流 互动 的 平台 。 











CCIE 路 举 和 交接 认证 稚 数 奖 科学 实战 手册 软 技能 : 代码 之 外 的 生 Python 宅 码 学 沪 径 
试 指南 ( 第 5 版 ) ( 第 1 (R+Python ) 存 指 商 
卷 ) 





Python 游戏 闹 香 快速 上 ”机 器 学 习 项 目 开 发 实战 。 衬 莫 派 Python 编 程 入 门 。 像 计 算 机 科学 京 一 样 畦 
竺 与 实战 ( 第 2 版 ) 考 Python (第 2 版 ) 





近 员 活动 


异步 社区 成 立 一 周年 大 异 赠 书 活动 开局 ! 


给 步 社区 的 来 历 异步 社区 是 人 民 邮 时 出 版 社 旋 下 
IT 专业 图 书 齐 航 社 区 ,于 2015 年 8 月 上 线 运 
营 ， 界 步 社区 依托 于 人 民 闻 电 出 版 社 20 全 年 的 证 


一 iWeb 峰 会 北京 站 即将 开局， 为 HTML5 精 


每 一 次 拍 去 高 呼 嫩 里 行业 的 影响 ， 每 一 天 无 数 人 
苞 殖 业 业 的 勤 调 ，2016 挫 起 ! 未 吧 ，8 月 27 日 ， 
HTML5 妖 会 北京 站 ,我 在 这 里 ,等 你 末 ,为 
HTMLS 娜 怠 ! ,- 


殉 污 6( 荐 1 收藏 评论 
每 周 半 价 宅 子 书 + 更 全 


-~ 


~ 各 和 Python 吉 得 入门 5 二 (入 2 


[ 甘 ] Richard Blum 勃 色 好, Christine 
Bresnahan 布 柔 斯 纳 罕 (作者 ) 陈竺 明 
马 立 新 ( 译 者 ) 





仁 区 里 秀 和 有 有 什么 ? 


购买 图 书 


我 们 出 版 的 图 书 涵 再 主流 IT 技术 ， 在 编程 语言 、Web 技 术 、 数 据 科 
学 等 领域 有 众多 经 典 畅销 图 书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 
市 讯 。 


下 载 资 源 
社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 程序 源 代 码 。 


另外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 注册 成 为 社区 用 户 束 
可 以 免费 下 载 。 


与 作 译 者 互动 


很 多 图 书 的 作 译 者 已 经 入 驻 社 区 ， 您 可 以 关注 他 们 ， 咨 询 技术 问 
题 ， 可 以 阅读 不 断 更 新 的 技术 文革 ， 听 作 译 者 和 编辑 畅 聊 好 书 背 后 有 趣 
的 故事 ， 还 可 以 参与 社区 的 作者 访谈 栏目 ， 回 您 关注 的 作者 提出 采访 题 
ls 








灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 纸 质 图 书 直 接 从 人 民 
邮电 出 版 社 书库 发 货 ， 电子 书 提供 多 种 阅读 格式 。 


对 于 重 磅 新 书 ， 社 区 提供 预 售 和 新 书 首发 服务 ， 用 户 可 以 第 一 时 间 
买 到 心仪 的 新 书 。 


用 户 帐 户 中 的 积分 可 以 用 于 购书 优惠 。100 积 分 =1 元 ， 购 买 图 书 
时 ， 在 ”有 E 本 里 填 入 可 使 用 的 积分 数值 ， 即 可 扣 减 相应 金额 。 


Dll 














购买 本 电子 书 的 读者 专 享 异步 社区 优惠 券 。 使 用 方法 : 注册 成 为 社区 用 户 ， 在 下 单 购书 
Do ‘57AWG”， 然 后 点 击 “ 使 用 优惠 码 ” 即 可 享受 电子 书 8 折 优惠 (本 优惠 券 只 可 使 用 一 
I 次 


纸 电 图 书 组 合 购买 


社区 独家 提供 纸 质 图 书 和 电子 书 组 合 购买 方式 ， 价 格 优 惠 ， 一 次 购 
买 ， 多 种 阅读 选择 。 

















软 技能 : 代码 之 外 的 生存 指南 

[ 闫 ] 约 翰 Z. 森 梅 蔚 ( john Z. Sonmez ) (作者 ) 王 小 刚 ( 译 者 ) 。” 杨 海 玲 (责任 澳 福 ) 
GI | 
分 李 推 害 想 实 阅读 


这 星 一 本 真正 从 “人 ”【( 而 非 按 术 也 非 管 理 ) 的 角度 关注 软件 开发 人 员 已 身 发 展 的 蔬 。 书 中 论述 的 
内 容 茎 涉及 生活 习 悍 ,又 包括 导 维 方式 ,总 显 技术 中 “人 ”的 因素 ， 全面 洪 解 软 件 行业 从 业 人 员 所 
需 知 道 的 所 有 “ 软 技能 ”。 

本 书 暴 焦 于 软件 开发 人 员 生 活 的 方方面面 , 从 更 秘 画 试 的 流程 到 精 耕 绍 作出 一 份 杀手 级 简历 , 从 创 
建 大 过 欢迎 的 博客 到 打 和 址 你 的 个 人 品牌 ， 从 提高 号 己 工 作 效 至 到 与 如 何 与 “ 疮 延 首 ”做 斗争 ， 基 至 
包括 如 何 投资 不 动产 ， 如何 关注 富 己 的 健康 ， 

本 书 共 分 为 职业 简 、 生 我 营销 简 、 学 习 简 、 生 产 力 简 、 理 财 简 、 健 身 简 、 精 神 簿 等 七 简 ， 概括 了 软 


入 纸 质 版 ” 闻 S9.69 着 46.02(78 折 ) 


sre aso ED 


日 电子 版 + 纸 质 版 ” 羊 59.00 


社区 里 还 可 以 做 什么 ? 
提交 勘误 


您 可 以 在 图 书页 面 下 方 提交 勒 误 ， 每 条 勘误 被 确认 后 可 以 获得 100 
积分 。 热 心 勘误 的 读者 还 有 机 会 参与 书稿 的 审 校 和 翻译 工作 。 


写作 

社区 提供 基于 Markdown 的 写作 环境 ， 喜 欢 写作 的 您 可 以 在 此 一 试 
身手 ， 在 社区 里 分 享 您 的 技术 心得 和 读书 体会 ， 更 可 以 体验 上 自 出 版 的 乐 
趣 ， 轻 松 实现 出 版 的 梦想 。 


a 0 0 
服务 。 














会 议 活 动 时 知道 
您 可 以 掌握 IT 圈 的 技术 会 议 资讯 ， 更 有 机 会 免费 获 赠 大 会 门票 。 


加 入 二 消 


扫描 任意 二 维 码 都 能 找到 我 们 : 








异步 社区 





微 信 订 阅 号 

















QQ 和 群 : 368449889 


社区 网 址 : www.epubit.com.cn 


官方 微 信 : 异步 社区 
官方 微 博 : @ 人 邮 腊 步 社区 ，@ 人 民 邮 电 出 版 社 -信息 技术 分 社 
投稿 长 咨询 : contact@epubit.com.cn 


